九、表格标签
一、表格的基本标签
场景:在网页中以行+列的单元格的方式整齐展示数据
基本标签:
标签名 | 说明 |
---|---|
table | 表格整体,可用于包裹多个tr |
tr | 表格每行,可用于包裹td |
td | 表格单元格,可用于包裹内容 |
标签的嵌套关系:table>tr>td
二、表格相关属性
场景:用于设定表格基本的展示效果
常见相关属性:
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字 颜色 | 边框宽度、颜色 |
width/hight | 数字 | 表格的宽高 |
例:
<table>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
</table>
table,td{
border: 1px solid black;
/* 边框线 */
}
table td{
/* 宽高 */
height: 50px;
width: 50px;
/* 水平垂直对齐 */
text-align: center;
line-height: 50px;
/* 字体大小 */
font-size: 25px;
}
td{
width: 50px;
height: 50px;
text-align: center;
}
显示效果:
三、表格标题和表头单元格标签
场景:在表格中表达整体大小标题和一列小标题
基本标签:
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表头单元格 | 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 |
注意事项:
*caption标签书写在table标签内部;
*th标签书写在tr标签内部(用于替换td标签);
例:
<table>
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>张凡</td>
<td>武艺</td>
<td>70分</td>
</tr>
<tr>
<td>林羽</td>
<td>武艺</td>
<td>90分</td>
</tr>
</table>
效果显示:
四、表格的结构标签
场景:让表哥的内容结构分组,突出表现的不同部分(头部、主体、底部),使语义更加清晰。
标签结构:
标签名 | 名称 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
注意事项:
*表格结构标签内部用于包裹tr标签;
*此标签可以省略。
例:
<table>
<thead>
<caption>学生成绩单</caption>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>张凡</td>
<td>武艺</td>
<td>70分</td>
</tr>
<tr>
<td>林羽</td>
<td>武艺</td>
<td>90分</td>
</tr>
</tbody>
</table>
五、合并单元格
场景:将水平或垂直多个单元格合并成一个单元格
合并单元格步骤:
1.明确合并那几个单元格;
2.通过左上原则,确定谁保留谁删除{
*上下合并只留最上面的,其他删除;
*左右合并只留最左边的,其他删除;}
3.给保留的单元格设置合并属性:
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,将多行单元格垂直合并 |
colspan | 合并单元格的个数 | 跨列合并,将多列单元格水平合并 |
4.注意事项:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)
例(计算机):
<table>
<tr>
<td colspan="4" class="z1"> 1234</td>
</tr>
<tr>
<td>ac</td>
<td>+/-</td>
<td>%</td>
<td>/</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td colspan="2">0</td>
<td>.</td>
<td>=</td>
</tr>
</table>
显示: