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

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

---

目录

表格标签：

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

表格标题标签：

表头单元格标签：

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

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

常用属性：

---

表格标签：

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

语法：

    <table >
        
    table>

---

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

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

：(table row) 用于定义表格中的行，必须嵌套在 table 标签中，在表格中有几组 tr ，就表示有多少行。
：(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：用于定义表格标题，内容居中对齐，与是同级标签。

 语法：

    <table >
        <caption>表格标题caption>
        <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 设置表格的高度

---

如果觉得对你有用，欢迎订阅专栏，我们可以一起进步、一起讨论；