前端表格知识 页眉 主题 页脚 设计让表格更语义
我们用一下内容简单介绍一下表格
caption>课程表</caption> cellspacing 规定单元格之间的空白
<!-- 表格标题 -->
thead 表格页眉
tbody 表格的主体
tfoot 表格的页脚
优点:告诉表格的显示顺序 表格结构 不会被代码打乱
row 是行 如果需要跨列 则rowspan
col 是列 如果是跨行 则为colspan
我们所有的表格内容都需要写在table中
<table>
<thead>
<tr>
<th colspan="2">时间</th>
<!-- 单元格跨列数 -->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<!-- 跨行合并 -->
<td>1</td>
<td>语文</td>
<td>思想品德</td>
<td>数学</td>
<td>物理</td>
<td>体育</td>
</tr>
<tr>
<td>2</td>
<td>语文</td>
<td>思想品德</td>
<td>数学</td>
<td>物理</td>
<td>体育</td>
</tr>
<tr>
<td>3</td>
<td>语文</td>
<td>思想品德</td>
<td>数学</td>
<td>物理</td>
<td>体育</td>
</tr>
<tr>
<td>4</td>
<td>语文</td>
<td>思想品德</td>
<td>数学</td>
<td>物理</td>
<td>体育</td>
</tr>
<tr>
<td colspan="7">休息</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<!-- 跨行合并 -->
<td>1</td>
<td>语文</td>
<td>思想品德</td>
<td>数学</td>
<td>物理</td>
<td>体育</td>
</tr>
<tr>
<td>2</td>
<td>语文</td>
<td>思想品德</td>
<td>数学</td>
<td>物理</td>
<td>体育</td>
</tr>
<tr>
<td>3</td>
<td>语文</td>
<td>思想品德</td>
<td>数学</td>
<td>物理</td>
<td>体育</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" style="color: red;">家教HTML基础课表案例</td>
</tr>
</tfoot>
</table>
【文章原创作者:盐城网站制作公司 http://www.1234xp.com/yancheng.html 欢迎留下您的宝贵建议】