html中的table详解(2)-木庄网络博客

当前第2页返回上一页

<table border="1">
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>

4、跨行和跨列的表格，rowspan表示跨行，colspan表示跨列，跨列的话就在当前表格行内删除，跨行的话就在下方的表格行内删除。

<table border="1">
    <caption>跨行</caption>
        <tr>
          <th>姓名</th>
          <td>Bill Gates</td>
        </tr>
        <tr>
          <th rowspan="2">电话</th>
          <td>555 77 854</td>
        </tr>
        <tr>
          <td>555 77 855</td>
        </tr>
    </table>

<table border="1">
    <caption>跨列</caption>
        <tr>
          <th>姓名</th>
          <th colspan="2">电话</th>
    </tr>
    <tr>
          <td>Bill Gates</td>
          <td>555 77 854</td>
          <td>555 77 855</td>
    </tr>
</table>

5.带有标题的表格，caption表示表格的标题，也可以用其他标签比如p标签来定位表格标题，但使用caption的好处是他会跟着表格一起走，默认是在和表格居中对齐。

6.在表格单元中排列内容，比如在单元格中添加段落，列表等。

<table border="1">
    <tr>
        <td>
            <p>这是一个段落，hello World！</p>
        </td>
        <td>
            <ul>
                <li>这是一个列表
                    <ul>
                        <li>html</li>
                        <li>css</li>
                        <li>javascript</li>
                    </ul>
                </li>
            </ul>
        </td>
    </tr>
</table>