HTML中使用table表格元素制作表格
table标签
1 标签简介
<table>(表格)标签是HTML中用于创建和展示数据表格的标签元素,通过使用<table>标签可以在html中创建建议的表格。
一个 HTML 表格由一个 <table> 元素和一个或多个 <tr>、<th> 和 <td> 元素组成。
2 相关属性
虽然下列相关属性在HTML5中已被弃用。但在VSCode中仍能正常使用(建议使用css代替)。点此查看table中已弃用属性在css中的等价写法
- 1 border:规定表格是否拥有边框(默认为"0"表示无边框,可以设置为"1"表示有边框)。
- 2 align:规定表格相对周围元素的对齐方式。属性值有:left(默认)、center、right。
- 3 csllpadding:规定单元格内沿与其内容之间的空白。
- 4 cellspacing:规定单元格之间的空白。
- 5 width:设置表格宽度,默认是内容撑起来的宽度。
3 子元素
3.1 caption标签
<caption>标签用于设置表格名称,显示于表格上方居中位置。
用法:<caption>课表</caption>
3.2 tr标签、th标签、td标签
有很多像我一样刚刚了解HTML的童鞋偶尔分不清table表格元素中的tr、th和td这三个标签,下面博主带大家看一下怎么才能将这三个标签记清楚。
- 1 <tr>标签:tr 全称为table row(表格行),用于定义表格行。
- 2 <th>标签:th 全称为table header cell(表头单元格),用于定义表头,与<td>区别:居中,加粗。
- 3 <td>标签:td 全称为table data cell(表中单元格),用于定义表格单元。
其中<th>和<td>需要写在<tr>标签中,用于配合写出完整的表格数据。
3.3 相关属性
- 1 align:tr、th、td属性,设置行中每个单元格中内容的对齐方式。
- 2 width:th、td属性,设置单元格宽度,设置一个单元格宽度既可改变对应一列的宽度。
- 3 rowspan:th、td属性,设置单元格合并的行数。
- 4 colspan:th、td属性,设置单元格合并的列数。
示例
该表源代码如下:
<table align="center" border="1" cellpadding="10" cellspacing="5" width="1000">
<caption>课表</caption>
<tr>
<th width="80"></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<tr height="50">
<td>第一节</td>
<td>自习</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>自习</td>
<td rowspan="12">休息</td>
<td>上课</td>
</tr>
<tr>
<td>第二节</td>
<td>自习</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>自习</td>
<td>上课</td>
</tr>
<tr>
<td>第三节</td>
<td>自习</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>自习</td>
<td>上课</td>
</tr>
<tr>
<td>午休</td>
<td colspan="5"></td>
<td></td>
</tr>
<tr>
<td>第四节</td>
<td>上课</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td>第五节</td>
<td>上课</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td>第六节</td>
<td>上课</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td>第七节</td>
<td>上课</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td>晚饭</td>
<td colspan="5"></td>
<td></td>
</tr>
<tr>
<td>第八节</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td>第九节</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td>第十节</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>上课</td>
<td>上课</td>
<td>上课</td>
</tr>
<tr>
<td></td>
<td colspan="7">
每节课50分钟,中间10分钟休息;第一节课上午9点开始,晚上7点第九节课,午休俩小时。
</td>
</tr>
</table>
结语
本文简要介绍了HTML中如何使用<table>标签制作一张简易的表格,博主才疏学浅,敬请大佬们指教。