Detailed explanation of HTML table form

1. Form properties

Form properties  usage

border

Represents the thickness of the table border width height table width and height

align

table tr td set horizontal alignment default value left center right

cellspacing

cell to cell distance

cellpadding

Cell text to cell border distance

bgcolor

Table background color table tr td can be used

background

You can set a background image for the table

valign

Set vertical alignment top middle (default) bottom

Merge table cell borders and style the table

      border-collapse: collapse;

Two, table table sample code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            /* table{
			合并单元格边框
			border-collapse: collapse;
		} */
        </style>
    </head>
    <body>
        <table cellpadding="5" align="center" border="1" width="400px" height="300px" cellspacing="0">
            <!-- 一个tr代表一行 一个td代表一列 -->
            <tr>
                <!-- 表格表头标签 自带居中加粗效果 -->
                <th align="right" valign="bottom">姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr valign="top">
                <td valign="bottom">张三</td>
                <td valign="middle">15</td>
                <td>男</td>
            </tr>
            <tr>
                <td>高启强</td>
                <td>35</td>
                <td>男</td>
            </tr>
        </table>
        <!-- 细线表格 -->
        <table bgcolor="black" cellspacing="1">
            <tr bgcolor="white">
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
            <tr bgcolor="white">
                <td>张三</td>
                <td>15</td>
                <td>女</td>
            </tr>
        </table>
        <!-- 表格完整结构  -->
        <table border="1" cellspacing="0" align="center">
            <!-- 表格标题标签 -->
            <caption>
                个人信息表
            </caption>
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- 表体 -->
            <!-- 不写tbody浏览器是会自动补全 -->
            <tbody>
                <tr>
                    <td width="150px">1</td>
                    <td>其他</td>
                    <td>删除</td>
                </tr>
            </tbody>
            <!-- 表脚 -->
            <tfoot></tfoot>
        </table>
    </body>
</html>

The achieved effect diagram is as follows, you can operate according to the properties of the table

3. The problem of cell merging

Merge across rows rowspan='number' Merge across columns colspan='number'

 Code example before merging:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <table border="1" cellspacing="0" align="center" width="300px" height="300px">
            <!-- ctrl + enter 表示换行  -->
            <!-- 跨行合并 rowspan='number'  跨列合并 colspan='number' -->
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <!-- 跨多行列合并 -->
                <td>14</td>
                <td>15</td>
                <td>16</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
                <td>34</td>
                <td>35</td>
                <td>36</td>
            </tr>
        </table>
    </body>
</html>

 The merged effect diagram is as follows:

The merged code is as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <table border="1" cellspacing="0" align="center" width="300px" height="300px">
            <!-- ctrl + enter 表示换行  -->
            <!-- 跨行合并 rowspan='number'  跨列合并 colspan='number' -->
            <tr>
                <td colspan="2">11</td>
                <!-- <td>12</td> -->
                <td>13</td>
                <!-- 跨多行列合并 -->
                <td colspan="3" rowspan="2">14</td>
                <!-- <td>15</td>
			<td>16</td> -->
            </tr>
            <tr>
                <td>21</td>
                <td rowspan="2">22</td>
                <td>23</td>
                <!-- <td>24</td> -->
                <!-- <td>25</td>
			<td>26</td> -->
            </tr>
            <tr>
                <td>31</td>
                <!-- <td>32</td> -->
                <td>33</td>
                <td>34</td>
                <td>35</td>
                <td>36</td>
            </tr>
        </table>
    </body>
</html>

Guess you like

Origin blog.csdn.net/qq_63299825/article/details/131043299