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

HTML中使用table表格元素制作表格

table标签
- 1 标签简介
- 2 相关属性
- 3 子元素
- - 3.1 caption标签
  - 3.2 tr标签、th标签、td标签
  - 3.3 相关属性
示例
结语

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>标签制作一张简易的表格，博主才疏学浅，敬请大佬们指教。
在这里插入图片描述

标签