HTML基础之表格
话不多说直接上代码:
代码解释:
table:表格标签
broder:表格线宽
caption:表格标题
th:表头
tr:行标签
td:列标签
thead、tbody、tfood:对表格代码进行封装,实际表现效果加和不加都一样。
<table border="1">
<caption> <strong>学生成绩单</strong> </caption>
<thead>
<tr>
<th>科目</th>
<th>学分</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>C语言</td>
<td>4</td>
<td>96</td>
</tr>
<tr>
<td>大学物理</td>
<td>3</td>
<td>83</td>
</tr>
<tr>
<td>物理实验</td>
<td>1</td>
<td>90</td>
</tr>
<tr>
<td>大学英语</td>
<td>4</td>
<td>81</td>
</tr>
<tr>
<td>工程数学</td>
<td>6</td>
<td>90</td>
</tr>
<tr>
<td>马克思主义基本原理</td>
<td>3</td>
<td>70</td>
</tr>
<tr>
<td>形势与政策</td>
<td>0</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">大吉大利</td>
</tr>
</tfoot>
</table>
运行样式:
合并单元格:
colspan:跨列成行
rowspan:跨行成列
使用的时候要删除掉那些要被合并掉得行和列,然后在左上方开始合并得第一个单元格进行设置,值为合并得行列个数。
同样代码合并如下:
<table border="1">
<caption> <strong>学生成绩单</strong> </caption>
<thead>
<tr>
<th>科目</th>
<th>学分</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>C语言</td>
<td>4</td>
<td>96</td>
</tr>
<tr>
<td>大学物理</td>
<td>3</td>
<td>83</td>
</tr>
<tr>
<td>物理实验</td>
<td>1</td>
<td>90</td>
</tr>
<tr>
<td>大学英语</td>
<td>4</td>
<td>81</td>
</tr>
<tr>
<td>工程数学</td>
<td>6</td>
<td>90</td>
</tr>
<tr>
<td>马克思主义基本原理</td>
<td rowspan="2" colspan="2">3</td>
</tr>
<tr >
<td>形势与政策</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">大吉大利</td>
</tr>
</tfoot>
</table>