表格在HTML中是一个比较重要的概念，大家一定要动手自己试试~
1.表格基础
- 概述：在HTML文件中，创建一个最简单的表格需要3个标签，分别是table、tr和td。
- table标签：用于定义一个表格的基础结构，是简单表格的外部框架。
- tr标签：table rows，定义表格的行，有多少tr就代表这个表格有多少行。
- td标签：table data，定义表格的数据，每个td标签代表一个单元格。
- 嵌套关系：table嵌套tr嵌套td。
你会发现，像是个表格，但好像缺了点什么。没错，就是表格的边界线。
- border属性：
<!-- 表格边界线的粗细被设置为1像素 -->
<table border="1">...</table>
你又会发现，表格虽然出来了，但是边界线的样式有点奇怪。需要加个属性来解决。
- 解决单元格空隙：
<!-- 表格边界线的粗细被设置为1像素 -->
<table border="1" style="border-collapse: collapse;">...</table>
如此一来，一个简单的表格就完成了~
2.表头标签
- 概述：一般来说，每个表格都是有表头存在的，需要和普通单元格区分开，此时th标签应运而生。
- th标签：th标签的层级和td标签的层级是相同的，只需要在第一行中将td全部替换为th即可。
3.合并单元格
- 概述：实际工作中的表格不可能是规规整整的，一定存在若干单元格的合并。在th或td标签中，添加两个属性即可满足需求。
- rowspan属性：跨行合并，即上下单元格合并。
- colspan属性：跨列合并，即左右单元格合并。
属性值为几，则跨行or跨列合并多少个单元格。
4.表格分区
- 概述：一个完整的表格其实分4个区域：标题、头部、主题、页脚。
- caption标签：用于标识表格的标题。
- thead标签：table head，用于标识表格的表头。
- tbody标签：用于标识表格的主体部分。
- tfoot标签：用于标识表格的页脚。
- 注意：无论这几个标签书写时顺序如何颠倒，浏览器加载时会自动按照正确顺序解析。
拓展：复杂表格的构建
以上图为例，一步一步来。
- 第一步：以表格中最小单元格为基础，有几行就列出几个tr标签。
图中表格可以得出，共4行，故书写4个tr
<table border="1" style="border-collapse: collapse;">
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
- 第二步：从第一行开始，书写每行的单元格。其中，顶边对齐的单元格为同一行。
<table border="1" style="border-collapse: collapse;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</table>
- 第三步：注意查看哪个单元格存在跨行or跨列，对该单元格对应属性进行赋值。
结束语：一花一世界，一木一浮生，诸君共勉！
网友评论