初学html的知识汇总——表格

表格

我们可以通过<table>标签来定义一个表格，每个表格可以根据<tr> 标签的个数来生成相应数量的行的表格，而表格中的每一行可以用<td> 标签来划分为单元格，因此，表格的建立逻辑是先建立行，在建立列，列的建立是基于分割单一行来实现的，因此代码结构为：

<!--其中border为设置表格边框的宽度-->
<table border="1" width="50%" >
        <tr>
            <td>第1行第1列</td>
            <td>第1行第2列</td>      
            <td>第1行第3列</td>    
        </tr>
        <tr>
            <td>第2行第1列</td>
            <td>第2行第2列</td>      
            <td>第2行第3列</td> 
        </tr>
        <tr>
            <td>第3行第1列</td>
            <td>第3行第2列</td>      
            <td>第3行第3列</td>
                  
        </tr>
</table>

 

运行结果：

灵活利用<tr>和<td>标签可以建立若干行列的表格，如果想要建立不同大小、形状的表格，就要用到表格中的行合并以及列合并。

行合并是将同一列当中不同的行合并起来，所用的操作语句为rowspan。效果如下：

单元格1	单元格2
	单元格3
	单元格4

列合并是将同一行当中不同的列合并起来，所用的操作语句为colspan。效果如下：

单元格1		单元格2
单元格3	单元格4	单元格5

 

实例：

<table border="1" width="50%" >
        <tr>
            <td rowspan="2">1</td>
            <td colspan="2">2</td>      
                  
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>      
                  
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>      
            <td>7</td>
                  
        </tr>
</table>

运行结果：

其余表格标签如下：

表格标签

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。