【11】HTML基础（3）——HTML常用标签⑦_一个简单的表格结构可以没有什么标签

十二、表格制作相关标签

---

（一）表格基础

创建一个简单的表格至少有三个标签组成，分别是<table>、<tr>、<td>标签。

1.<table>

表格，定义的是整个的表格大结构。

2.<tr>

table rows，表格的行，定义的是表格由多少行组成。

3.<td>

table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。

4.三者的关系：

table>tr>td (">"表示嵌套的意思）；
一个表格中有多个行，每个行中有多个单元格。

---

(二）<table>标签常用属性

示例2*3的表格：

<table border="1px">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

浏览器显示：

★表格的单元格之间有默认的空隙，会导致双线边框。
解决方法∶设置标签样式属性style。
属性值∶ border-collapse∶collapse;表示边框塌陷。

示例2*3的表格：

<table border="1px" style="border-collapse: collapse">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

浏览器显示：

---

(三）表头单元格标签

如果要绘制表头，使用标签<th>，

1.语法：

1.<th> table head data，表头单元格；
2.在表格中绘制的时候，替换的是<td>的位置；
3.<th>标签中自带默认的css样式效果，文字显示粗体居中；

示例2*3的表格：

<table border="1px" style="border-collapse:collapse">
    <tr>
        <th>表头</th>
        <th>表头</th>
        
1
2
3
4