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>
跨列操作同理；