目的:部分标签并不使用,但是其存在,创建案例,方便自己复习
关于表格的所有标签使用、说明
HTML代码:
<!-- 表格学习 -->
<table border="1px">
<caption>表格学习</caption>
<colgroup>
<col style="width: auto; background-color: #b89898;">
<col style="width: auto; background-color: #ea8ec2;">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>80</td>
<td>99</td>
<td>179</td>
</tr>
<tr>
<td>李四</td>
<td>77</td>
<td>100</td>
<td>177</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">平均分</td>
<td>178</td>
</tr>
</tfoot>
</table>
效果:
标签说明:
1、<table> 元素表示表格数据
2、<caption>:表格标题元素
3、<colgroup>:表格列组元素 -- 定义表格某列的样式
4、<col>:表格列元素 -- 定义表格某列的样式
5、<thead> -- 定义了一组定义表格的列头的行,子元素为tr、th
6、<tr> -- 定义了表格中的一行单元格,子元素为td
7、<th> -- 定义表格内的标题(或是表头)单元格
8、<tbody> -- 表格(<table>)主要内容的组成部分,子元素为tr、td
9、<td> -- 定义了表格中的一个数据单元格,该单元格包含数据
10、<tfoot> -- 定义了一组表格中各列的汇总行,子元素为tr、td
标签属性:
table属性
- border:该属性用于设置围绕表格及其单元格的边框宽度。
- width:用于设定表格的宽度,可以以像素或百分比为单位。
- height:此属性用于设定表格的高度,但需要注意的是,在XHTML中,
<table>
标签没有这个属性。 - background:用于定义表格的背景图像URL。
- align:规定表格相对于周围元素的对齐方式,其值可以是左(left)、居中(center)或右(right)对齐。
- bgcolor:设置表格的背景颜色,可以使用颜色名称、十六进制代码或RGB值。
- bordercolor:专门用于指定表格边框的颜色。
- cellspacing:定义单元格之间的空间大小,通常以像素为单位。
- rules:该属性决定了内部单元格边框的显示,取值为none、cols、rows或all。
- frame:类似于
rules
属性,但仅应用于表格的外边框。 - cellpadding:用于设置单元格的边框与内容之间的空间大小。
行(tr)的属性
- bgcolor:用于设置内容行的背景颜色。
- border:定义内容行的边框宽度。
- background:为内容行设置一个背景图像。
- align:用于指定整行内容的水平对齐方式,可能的值有左(left)、居中(center)和右(right)。
- valign:定义整行内容的垂直对齐方式,包括上(top)、中(middle)和下(bottom)。
- bordercolor:设置内容行边框的颜色。
单元格(td和th)的属性
- width:用于指定单元格的宽度。
- height:用于设定单元格的高度,但在XHTML中不适用。
- bgcolor:用于定义单元格的背景颜色。
- border:定义单元格边框的宽度。
- background:用于定义单元格的背景图像。
- align:设置单元格内容的水平对齐方式,可取值为左(left)、居中(center)和右(right)。
- valign:设置单元格内容的垂直对齐方式,包括上(top)、中(middle)和下(bottom)。
- colspan:指定单元格向右跨越多少列。
- rowspan:用于指定单元格向下跨越多少行。
结束 ---