表格标签

表格标签

 

应用场景：表格标签一般用来展示数据，不是用来布局的

创建表格

<talbe>
    <tr>
        <td>
            文字信息
        </td>
    </tr>
</table>

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在table标签中
td标签用于定义表格中的单元格，必须嵌套在<tr></tr>中
字母td表示数据(table date)，即表示单元格中的内容。

<tr></tr>中只能嵌套<td></td>类的单元格

<td></td>中能够嵌套任何元素。

表格属性

 

表格的属性都是写在table开始标签里面的

表格属性可以设置表格的边框大小，表格的宽度，高度，单元格之间的距离以及文字与单元格的距离

<table border="1" height="200"></table>

 

实验结果截图：

 

 

 

 

表头单元格

 

表头单元格里面的文字都会居中且加粗。

只需要把<td></td>更改为<th></th>即可
th其实也是一个单元格，只不过这个单元格里面的文字格式改变了而已

 

tips：如果之前的td标签想要更改为th标签，那么只需要安装鼠标滚轮，选中需要修改的文字然后下拉就可以更改了。

实验截图：

 

 

 

表格标题

 

表格标题是应用于表格上的，只有在表格中应用才有意义，在别的标签上面应用的是没有意义的。

<table>
<caption>
文本信息
</caption>
</table>
表格标题都是跟随表格的走的，表格在左他就在左，它会一直位于表格的正中间。

 

实验截图：

 

 

 

合并单元格（难点）

 

跨行合并：rowspan="合并单元格的个数"

跨列合并:colspan="合并单元格的个数"

合并标签是写在td或者th开始标签里面的

 

合并的顺序是先左后右，从左边第一个开始合并

先上后下，从上面第一个开始合并

合并的步骤：

1，先确定是跨行还是跨列

2.根据先左后右，先上后下找到目标单元格，然后写上合并的方式以及合并的数量。

例如<td rowspan="2">文本信息</td>

3.删除多余的单元格

<table>
<tr>
<td rowspan="合并的行数">
</td>
</tr>
</table>

 

实验截图：

跨行合并：

跨列合并：

 

 

 

表格总结

 

表格提供了HTML中定义表格式数据的方法（主要用于展示数据，不是用于操作）

表格中由行中的单元格组成

表格中没有列元素，都是由一个个单元格组成

表格的外观都是由css完成的

 

要求：必须能够手写表格结构，并且能够简单合并单元格

 

 

 

 

表格划分结构

 

表格划分结构可以方便css对各个部分进行修改，能够更好的分清结构

<thed></thead>：用于定义表格的头部。用于放标题之类的东西。<thead>内部必须拥有<tr>标签

<tbody></tbody>：用于定义表格的主体。放数据主体

<tfood></tfood>放表格的脚注之类。

以上标签都是放在table标签里面的

实验截图：