HTML表格标签

Манго нектар

于 2024-09-18 21:01:34 发布

阅读量295

点赞数 10

文章标签： html 前端 java

本文链接：https://blog.csdn.net/m0_74742670/article/details/142343242

版权

表格的组成特点：

行，列，单元格（单元格特点是同行等高，同列等宽）。

表格的主要标签

表格标签：<table> </table>

行标签：<tr> </tr>

列标签：<td> </td>

   <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table

表格标签的常用属性

border: 设置表格边框（单位px）

width: 设置表格宽度（单位px)

height: 设置表格高度（单位px)

    <table border="1px" width="600px" height="400px">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

表格的单元格合并

水平合并：colspan ="n"(保留左边，删除右边）

垂直合并：rowspan="n"(保留上边，删除下边）

n表示合并单元格的数量

    <table border="1px" width="600px" height="400px">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
            <td>单元格9</td>
        </tr>
    </table>

 <table border="1px" width="600px" height="400px">
        <tr>
            <td colspan="2">单元格1</td> 
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td rowspan="2">单元格6</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
        </tr>
    </table>