学习笔记：表格小知识

表格规范与行列的合并

1.规范

   <table>
        <caption>标题</caption>
        <!-- 表头 -->
        <thead></thead>
        <!-- 表体 -->
        <tbody></tbody>
        <!-- 表尾 -->
        <tfoot></tfoot>
   </table>

2.合并

ps: 合并只能在 td / th 进行，不能在 tr 合并

行的合并

     <table>
        <caption>合并行演示</caption>
        <!-- 行的合并 属性：rowspan -->
        <!-- 合并多少行意味着从当前行到第几行都要减少当前列 例如：合并3行则从当前行开始到第3行都要减少当前列 -->
        <tbody>
            <tr>
                <td rowspan="3" bgcolor="blue">1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </tbody>
    </table>

列的合并

     <table>
        <caption>合并列演示</caption>
        <!-- 列的合并 属性：colspan -->
        <!-- 合并多少列意味着从当前列减少n-1列 例如合并2列则从当前列开始接下来减少1列 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="2" bgcolor="blue">2</td>
                <!-- <td>3</td> -->
                <td>4</td>
                <td>5</td>
            </tr>
        </tbody>
    </table>

表格规范与行列的合并

1.规范

2.合并

行的合并

列的合并

更多相关文章

随机推荐