HTML笔记-- 表格标签
标签（空格分隔）： HTML
表格标签（*******）
- 作用：可以对数据进行格式化操作，是数据显示更加清晰；
- 表示方法：
-
<table></table>表示一个表格行和列属性定义在这对标签内部！- border: 表示表格个线粗细有无；0则表示没有表格线；
- bordercolor：表示表格线的颜色
- cellspancing： 表示单元格之间的距离，0则表示单元格的线重叠；
- width：表示每个单元格的宽度（一行中）
- height：表示每个单元格的高度（一行中）
-
<tr></tr>表示行数有几行就定义几个tr- align：设置每个单元格里资源位置，left（默认值）； right ；center
-
<td></td>表示列数定义在行标签内部表示每一行有多少列；当然总列数有最大值决定； -
<th></th>可以当<td>使用，他的效果是默认居中加粗 - 画法技巧：首先数要画得单元格有多少行，然后每一行中有多少列；
- 例如实现如下效果：
<table>
<tr>
<th>姓名</th>
<td>张三</td>
<td>王五</td>
<td>李四</td>
</tr>
<tr>
<th>年龄</th>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
-
代码如下：
<table>
<tr>
<th>姓名</th>
<td>张三</td>
<td>王五</td>
<td>李四</td>
</tr>
<tr>
<th>年龄</th>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
这里由于编译器的原因导致显示方式不正确，复制代码用浏览器打开就可以看到实际效果。
- 关于合并单元格：
- 合并列:比如实现一个单元格在一行中站两列的位置。
<table>
<tr align="center">
<td colspan="4">人员信息</td>
</tr>
<tr>
<th>姓名</th>
<td>张三</td>
<td>王五</td>
<td>赵四</td>
</tr>
<tr>
<th>年龄</th>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
- 合并列:比如实现一个单元格在一行中站两列的位置。
代码如下：
<table>
<tr align="center">
<td colspan="4">人员信息</td>
</tr>
<tr>
<th>姓名</th>
<td>张三</td>
<td>王五</td>
<td>李四</td>
</tr>
<tr>
<th>年龄</th>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
即跨列属性在td标签中设置:"<td colspan="4">人员信息</td>"
- 合并行操作
比如实现如下效果
<table>
<tr align="center">
<th>年龄</th>
<td>1</td>
<td rowspan="3">1</td>
</tr>
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th>年龄</th>
<td>12</td>
</tr>
</table>
代码如下
<table>
<tr align="center">
<th>年龄</th>
<td>1</td>
<td rowspan="3">1</td>
</tr>
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th>年龄</th>
<td>12</td>
</tr>
</table>
即在第一行的第三个单元格即td标签的属性中设置rowspan="3"
可以看出所有的跨行跨列操作都是在单元格td标签中设置，关键是：
<ol type="1">
<li>实现跨行操作：必须先算清一共有几行，如上述例子一共有三行；就有三个tr</li>
<li> 第一行中有3列，第二和地三行中有2列</li>
<li>就在第一行第三个单元格设置rowspan属性</li>
</ol>
跨列操作同理；
