HTML 表格

1、表格和边框属性

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

2、表格的表头

<h4>表头：</h4>
<table border="1">
    <tr>
        <th>Heading</th>
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>row 1,cell1</td>
        <td>row 1,cell2</td>
    </tr>
    <tr>
        <td>row 2,cell1</td>
        <td>row 2,cell2</td>
    </tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
    <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th>电话</th>
        <td>55577854</td>
    </tr>
    <tr>
        <th>地址</th>
        <td>上海</td>
    </tr>
</table>

3、表格中的空单元格

<table border="1">
    <tr>
        <td>row 1,cell1</td>
        <td>row 1,cell2</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>row 2,cell2</td>
    </tr>
</table>

4、表格的标题

<table border="1">
<caption>我的标题</caption>
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

5、跨行和跨列的单元格

<h4>横跨两列的单元格：</h4>
<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>55577854</td>
        <td>55577855</td>
    </tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
    <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>55577854</td>
    </tr>
    <tr>
        <td>55577855</td>
    </tr>
</table>

6、表格内的标签

<table border="1">
    <tr>
        <td>
            <p>这是一个段落。</p>
            <p>这是另一个段落。</p>
        </td>
        <td>
            这个单元包含一个表格：
            <table border="1">
                <tr>
                    <td>a</td>
                    <td>b</td>
                </tr>
                <tr>
                    <td>c</td>
                    <td>d</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            这个单元包含一个列表：
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>菠萝</li>
            </ul>
        </td>
        <td>HELLO</td>
    </tr>
</table>

7、单元格边距
使用 Cell padding 来创建单元格内容与其边框之间的空白。

<h4>没有 cellpadding:</h4>
<table border="1">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" cellpadding="10">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

8、单元格间距
使用 Cell spacing 增加单元格之间的距离。

<h4>没有 cellspacing:</h4>
<table border="1">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1" cellspacing="10">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

9、向表格添加背景颜色或背景图像

<h4>背景颜色：</h4>
<table border="1" bgcolor="red">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>背景图像：</h4>
<table border="1" bgcolor="">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

10、向表格单元格添加背景颜色或背景图像

<h4>单元背景：</h4>
<table border="1">
    <tr>
        <td bgcolor="red">First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td bgcolor="">Second</td>
        <td>Row</td>
    </tr>
</table>

11、在表格单元格中排列内容

<table width="400" border="1">
    <tr>
        <th align="left">消费项目</th>
        <th align="center">一月</th>
        <th align="right">二月</th>
    </tr>
    <tr>
        <td align="left">衣服</td>
        <td align="center">$241.10</td>
        <td align="right">$50.20</td>
    </tr>
    <tr>
        <td align="left">化妆品</td>
        <td align="center">$30.00</td>
        <td align="right">$44.45</td>
    </tr>
    <tr>
        <td align="left">食物</td>
        <td align="center">$730.40</td>
        <td align="right">$650.00</td>
    </tr>
    <tr>
        <th align="left">总计</th>
        <th align="center">$1001.50</th>
        <th align="right">$744.65</th>
    </tr>
</table>

12、框架（from）属性

<p>Table with frame="box":</p>
<table frame="box">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<p>Table with frame="hsides"</p>
<table frame="hsides">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<p>Table with frame="vsides"</p>
<table frame="vsides">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

13、表格的页眉、主体、页脚

<html>

<head>
    <style type="text/css">
        thead {color: green}
        tbody {color: blue;height: 50px}
        tfoot {color: red}
    </style>
</head>

<body>

<table border="1">
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
</table>

</body>
</html>

HTML 表格

推荐阅读更多精彩内容