【HTML】如何使用html制作一个简易的表格？

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>标签制作一张简易的表格，博主才疏学浅，敬请大佬们指教。