【自学HTML笔记第2篇】HTML中的表格标签

南斋孤鹤

已于 2022-11-13 11:18:00 修改

阅读量860

点赞数 1

分类专栏： HTML笔记文章标签： html 前端

于 2022-10-21 21:42:09 首次发布

本文链接：https://blog.youkuaiyun.com/m0_64231944/article/details/127453830

版权

HTML笔记专栏收录该内容

5 篇文章

订阅专栏

放弃比坚持容易，如果轻言放弃，那我们当初努力的意义又是什么呢？

表格中的表头 thead、表身 tbody、表脚 tfoot：

表格中的行合并 rowspan、列合并 colspan；

常用属性：

表格标签：

如何在浏览器建一个表格呢？HTML超文本标记语言为我们提供了表格标签（table);

语法：

    <table >
        <!--这里可以添加表格内容比如：行列，信息等 -->
    </table>

表格中的行 tr、单元格 td：

如何到表格中添加信息呢？这里就需要提到另外两个标签:

<tr>：(table row) 用于定义表格中的行，必须嵌套在 table 标签中，在表格中有几组 tr ，就表示有多少行。
<td>：(table date)用于定义表格中的单元格，必须嵌套在 tr 标签中，一组 tr 中包含几对 td，就表示该行有多少个单元格。

语法：

    <table ><!-- 新建一个一行三列的表格-->
        <tr >
            <td>测试一</td>
            <td>测试一</td>
            <td>测试一</td>
        </tr>
        <tr >
            <td>测试一</td>
            <td>测试一</td>
            <td>测试一</td>
        </tr>
    </table>

效果演示：

可以看出这个表格并没有边框，后面讲如何显示边框（这里需要使用到一个属性border）；

表格标题标签：

观察上图：上面这个表格是有标题的，那么如果我们新建的表格也会需要标题,那我们如何设置表格标题呢？这就需要表格标题标签<caption>;

caption：用于定义表格标题，内容居中对齐，与<tr>是同级标签。

语法：

    <table ><!-- 新建一个一行三列的表格-->
        <caption>表格标题</caption>
<!--需要说明的是，caption 标签必须紧随 table 标签之后，
并且一个表格只能有一个标题，默认情况下，标题都是位于表格的第一行-->
        <tr >
            <td>测试一</td>
            <td>测试一</td>
            <td>测试一</td>
        </tr>
        <tr >
            <td>测试一</td>
            <td>测试一</td>
            <td>测试一</td>
        </tr>
    </table>

效果演示：

表头单元格标签：

上面说到的 td 标签准确来说叫表行单元格，在 HTML 中，还有一种单元格，那就是表头单元格，用 th 标签标示。th 是英文 table header（表头单元格）的缩写；

语法：

   <table border="2" >
        <caption>表格标题</caption>
        <tr >
            <th>表头一</th>
            <th>表头二</th>
            <th>表头三</th>

        </tr>
        <tr >
            <td>测试一</td>
            <td>测试一</td>
            <td>测试一</td>
        </tr>
    </table>

效果演示：

表格中的表头 thead、表身 tbody、表脚 tfoot：

在使用表格进行布局时，可以将表格划分为表头 thead、表身 tbody、表脚 tfoot，也分别叫表格的头部、主体和页脚。这样区分的目的是为了，我们之后可以对表格的某一部分进行美化等等；

语法：

    <table border="2" ><!-- 新建一个一行三列的表格-->
        <caption>表格标题</caption>
        <thead>
         <tr >
            <th>表头一</th>
            <th>表头二</th>
            <th>表头三</th>
        </tr>   
        </thead>
        <tbody>
         <tr >
            <td>测试一</td>
            <td>测试一</td>
            <td>测试一</td>
        </tr>   
        </tbody>
        <tfoot>
            <tr >
               <td>测试一</td>
               <td>测试一</td>
               <td>测试一</td>
           </tr>   
        </tfoot>       
    </table>

表格中的行合并 rowspan、列合并 colspan；

步骤：

第一步：先确认是跨行合并（rowspan，保留最上边的单元格）还是跨列合并（colspan保留最左边的单元格）。
第二步：根据先上后下，先左后右规则，找出需要合并的单元格。
第三步：如果被合并的单元格内有内容，则把被合并的单元格删除掉。

语法：

    <table border="2" >
        <caption>表格标题</caption>
         <tr >
            <th>表头一</th>
            <th>表头二</th>
            <th>表头三</th>
        </tr>    
        <tr >
            <td>测试一</td>
            <td >测试一</td>
            <td rowspan="2">测试一</td>
        </tr>       
            <tr >
               <td colspan="2" align="center">测试一</td>       
        </tr>        
    </table>

效果演示：

常用属性：

align
        作用：设置表格在网页中的水平对齐方式，常用属性值有 left（居左显示），right（居右显示），center（居中显示）。

border
        作用：设置表格外边框的宽度，宽度以像素为单位，默认为0。

width、height

        作用：width 设置表格的宽度，height 设置表格的高度