表格标签-一一网

表格

table表格标签，tr行标签， td列标签。要想在网页中看到表格必须进行table标签border属性的设置

     <table border="1" width="100px" height="100px">
        <caption>等级</caption>
        <tr>
            <th>A</th>
            <th>B</th>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
    </table>
复制代码

table的caption是表格的标题，它常常作为table的第一个元素出现。在表格所占区域的居中显示
th标签是“标题小格”，可以替代td的作用，表示标题的小格，小格中的内容居中并加粗显示

colspan属性

colspan属性用来设置td或者th的列跨度。

    <table border="1" width="100px" height="100px">
        <caption>等级</caption>
        <tr>
            <th colspan="2">A</th>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
    </table>
复制代码

rowspan属性

rowspan属性用来设置td或者th的行跨度。合并单元格时一定要正确判断合并后的单元格所属的行。正确地对单元格进行删减

    <table border="1" width="100px">
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>E</td>
            <td rowspan="2">F</td>
            <td colspan="2" rowspan="3">G</td>
        </tr>
        <tr>
            <td>H</td>
        </tr>
        <tr>
            <td>I</td>
            <td>J</td>
      
          
        </tr>
    </table>
复制代码

thead tbody tfoot标签

thead标签定义表头。

tbody标签定义表核心内容。

tfoot标签定义表脚，通常是汇总行.

cellspacing cellpadding属性已经被css替代

align：规定单元格中内容的水平对齐方式。

属性值：

left：左对齐内容（默认值）。

right：右对齐内容。

center：居中对齐内容。

justify：对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

char：将内容对准指定字符。

valign：规定单元格中内容的垂直排列方式。

属性值：

top：对内容进行上对齐。

middle：对内容进行居中对齐（默认值）。

bottom：对内容进行下对齐。

baseline：与基线对齐。

    <table border="6"width="500px" bgcolor="#f2f2f2"cellspacing="0"
    cellpadding="10px" align="center">
        <caption>前端工程师平均工资</caption>
        <thead bgcolor="yellow">
        <tr>
            <th rowspan="2">城市</th>
            <th colspan="2">2014年</th>
            <th rowspan="2">2015年</th>
            <th rowspan="2">2016年</th>
        </tr>
        <tr>
            <th>上半年</th>
            <th>下半年</th>
        </tr>
        </thead>
        <tbody align="center" valign="middle">
        <tr>
            <td bgcolor="green">北京</td>
            <td>8000</td>
            <td>9000</td>
            <td>10000</td>
            <td>12000</td>
        </tr>
        <tr>
            <td bgcolor="green">上海</td>
            <td>8000</td>
            <td>9000</td>
            <td>10000</td>
            <td>10000</td>
        </tr>
        </tbody>
        <tfoot>
        <tr align="center" valign="middle">
            <td bgcolor="green">合计</td>
            <td>8000</td>
            <td>9000</td>
            <td>10000</td>
            <td>12000</td>
        </tr>
        </tfoot>
    </table>
复制代码