html之table属性

目标：
1，table标签属性
2，table通用属性
3，tr标签属性
4，td标签属性

上一节我们说了table简单结构和复杂结构，这一节我们来看一下table的属性

1，table标签属性
1，边框border，设置table的表格，默认为0，没有表格。

例如： border = “1” 设置表格边框为1px

2，外间距cellspacing，设置边框与边框的距离；

例如：cellspacing = “20” 效果如下：

不过一般我们设置cellspacing = “0”，效果如下：

3，内间距：cellpadding，设置边框与内容之间的距离。

例如：cellpadding = “10”，效果如下：

综上效果，代码如下：

<table border="1" cellspacing="0" cellpadding="10"><caption>信息采集表</caption><tr align="center" ><td>序号</td><td>姓名</td><td>性别</td><td>籍贯</td></tr><tr align="center"><td>1</td><td>Jerry</td><td>女</td><td>河北衡水</td></tr><tr align="center"><td>2</td><td>Tom</td><td>男</td><td>运城稷山</td></tr><tr align="center"><td>3</td><td>Alex</td><td>男</td><td>天津宝坻区</td></tr></table>

2，table通用属性：【<table>,<tr>,<td>都识别的属性】
1，对齐方式align=“left/center/right” 设置对齐方式

例如：align=“center”作用如下：

1，用在table标签上，是设置table表格整体居中的
2，用在tr或者td上是设置里边的文本内容居中

2，宽度width，设置表格的宽度，取值可以为固定像素值（像素px省略不写），也可以是百分比

例如：width=“80%”或者 width = “800” 设置宽度

3，高度height，设置表格高度。取值可以为固定像素值（像素px省略不写），也可以是百分比

例如：height=“20%”或者 height = “100” 设置高度

3，tr属性
1，垂直对齐方式valign=“top/middle/bottom”

top：上
middle：中，默认值
bottom：下
例如：第一行tr设置 height=“100” valign=“top”，效果如下：

【注意valign属性td也可以使用】
4,td属性
1，垂直对齐valign
例如：第一行当中的第一列和第二列分别设置靠下和居中

<tr align="center" height="100" valign="top"><td valign="bottom">序号</td><td valign="middle">姓名</td><td>性别</td><td>籍贯</td>
</tr>

效果如下：

2，合并列colspan=“数字” 数字是几合并几列
3，跨行合并 rowspan = “数字” 数字是几跨几行合并
我们先做一个5行5列的表格，如下图所示：

代码如下：

<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td></tr><tr><td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td></tr></table>

我们合并1-1和1-2，合并3-1和4-1效果如下：

代码如下：

<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td colspan="2">1-1</td> <!-- 这里1-1占了2个td的位置，所以需要删除1-2  --><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr><tr><td rowspan="2">3-1</td><!-- 这里3-1跨2行合并占了4-1的位置，所以需要删除4-1  --><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td></tr><tr><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td></tr><tr><td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td></tr></table>

我们继续合并3-3,3-4,3-5,4-3,4-4,4-5,5-3,5-4,5-5效果如下：

这里合并了3列，跨了3行，在3-3td上添加colspan=“3” rowspan = “3”；删除3-4,3-5，跨了3行，需要删除4-3,4-4,4-5,5-3,5-4,5-5.代码如下：

<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td colspan="2">1-1</td><!-- 这里1-1占了2个td的位置，所有需要删除1-2  --><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr><tr><td rowspan="2">3-1</td><td>3-2</td><td rowspan="3" colspan="3">3-3</td><!-- 删除了3-4和3-5 --></tr><tr><td>4-2</td><!-- 删除了4-3,4-4,4-5 --></tr><tr><td>5-1</td><td>5-2</td><!-- 删除了5-3,5-4,5-5 --></tr></table>

【注意：】我们合并的时候，需要删除相应的td列，如果删除不正确，会出现不必要的错误。

例如：下面案例我们需要删除1-2，如果不删除则会出现错误

<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td colspan="2">1-1</td><!-- 这里1-1占了2个td的位置，所以需要删除1-2  --><td>1-2</td><!-- 这里需要删除1-2 但是没有删除 --><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr></table>

效果如下：

上述例子中我们删除了1-2就好了。
代码如下：

 <table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td colspan="2">1-1</td><!-- 这里1-1占了2个td的位置，所以需要删除1-2  --><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr></table>

效果如下：

ok，我们今天的内容暂时到这里了，本章主要讲的是表格属性。希望和大家互相交流学习，谢谢。

html之table属性相关推荐

【前端笔记】BootStarp的table属性跨行跨列后无法居中
解决问题引用BootStarp的table属性跨行跨列后无法居中. html代码如下(table为bootstarp属性): <head><link rel="style ...
elementUI表格table的列内置样式修改方法/对比template，列属性class-name，table属性cell-class-name
1,table属性cell-class-name的使用可以作用到某一行,或者某一列等等.但是在style标签中要去掉scoped,不然无效. (在elementUI中,row-class-name ...
asp.net Table 属性
前言在内容设置完成后,要把表格去掉,毕竟没有那个网站用表格显示的. 视频中就用一行代码来完成的(如下) BorderWidth ="0" 就是把表格线的宽度设置为0 但是我不管怎 ...
vue：遇到的坑之-----table属性（element-ui）
主要记录一下项目中常用到的table属性 1.stripe:是否显示斑马纹 <el-table :stripe="true"> </el-table> // ...
表格（table属性、th/td属性、单元格合并）
表格现在HTML 表格应该用于表格数据语法:表格的容器<table>行<tr><td>普通单元格</td><th>表头单元格</ ...
CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...
iview中Table属性中的on-row-click属性
iview中Table属性中的on-row-click属性 on-row-click属性,在此后台系统中用来从左侧的table中选中一项,作为值传递给右侧的表格,右侧表格从拿到的数据,渲染出对应的列表 ...
html的table属性笔记
<table cellpadding="10px" border="1px" cellspacing="5px"><!-- ...
java中table属性_div实现table功能
div布局主要用到的css属性 table 此元素会作为块级表格来显示(类似 table-row-group 此元素会作为一个或多个行的分组来显示(类似 ). table-header-g ...
表格(table)属性cellspacing、cellpadding
cellspacing属性用来指定表格各单元格之间的空隙.此属性的参数值是数字,表示单元格间隙所占的像素点数. 我们来看下面的两个表格: 上面第一个表格的单元格之间没有空白距离,而第二个的 ...

html之table属性

html之table属性相关推荐

最新文章

热门文章