HTML5标签介绍（5）--表格

前言

经过前面几期的介绍，我们了解的HTML5的标签越来越多，所以我们更加希望我们的网页更加整齐有序，而我们的HTML5也给我们提供了一些工具，今天我们就继续介绍表格的内容。

标签

表格

<table>
      <tr>
          <td>单元格</td>
      </tr>
</table>

< table >< tr >< td >三个标签加起来构成了表格，都为双标签。先使用< table >< /table >声明表格再添加< tr >< /tr >，每一个< tr >代表一行，在< tr >< /tr >之间添加< td >< /td >,每一个< td >代表一列。在“单元格”处可输入文本。

<table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

这样就可以形成单元格效果，但它并没有单元格边框，我们可以通过在< table >中添加属性进行设置。例如

<table border="1" align="center" width="600" height="400">

border代表边框，align代表单元格在网页位置，width和height是长和宽。其他样式我们更多使用CSS改变

快捷键：table>tr数字>td数字 （数字为希望生成的行列数）回车即可

合并单元格

colspan="合并数" 
rowspan="合并数"

colspan为水平合并，rowspan为垂直合并，在“合并数”处添加合并的单元格数。

<table border="1" align="center" width="600" height="400">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6,7</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
            <td>单元格14</td>
            <td>单元格15</td>
        </tr>
        <tr>
            <td>单元格16</td>
            <td>单元格17</td>
            <td>单元格18</td>
            <td>单元格19</td>
            <td>单元格20</td>
        </tr>
    </table>

在所要合并的第一个单元处的< td >标签内添加合并属性，再删除被合并的单元格，就可以达到合并效果。

合并之后，他们就成为一个整体，之后再进行操作就是一起操作。
如果再想将单元格6，7向下合并，如下

<table border="1" align="center" width="600" height="400">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">单元格6,7，11，12</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格13</td>
            <td>单元格14</td>
            <td>单元格15</td>
        </tr>
        <tr>
            <td>单元格16</td>
            <td>单元格17</td>
            <td>单元格18</td>
            <td>单元格19</td>
            <td>单元格20</td>
        </tr>
    </table>

有了表格我们就能是我们的页面更加整齐。今天，我们就先介绍到这里，期待下期再见。