(前端)html与css，9、表格

1、表格基础

table、re、td
表格的标签之间是去哪套关系，table>tr>td
table:表格。
tr:table rows行
td:table dock，单元格
<table border="1"></table>
border是table自带属性，自动添加边框。
如果我们需要添加表头的语义，th标签表示表头单元格。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>第一行，第一列</td>
            <td>第一行，第二列</td>
            <td>第一行，第三列</td>
            <td>第一行，第四列</td>
        </tr>
        <tr>
            <td>第二行，第一列</td>
            <td>第二行，第二列</td>
            <td>第二行，第三列</td>
            <td>第二行，第四列</td>
        </tr>
        <tr>
            <td>第三行，第一列</td>
            <td>第三行，第二列</td>
            <td>第三行，第三列</td>
            <td>第三行，第四列</td>
        </tr>
     </table>
</body>
</html>

View Code

效果图↓

2、合并单元格

单元格标签:td、th
有两个属性用来合并单元格:
rowspan:合并行单元格。
colspan合并列方向单元格。
属性值:是一些数字，数字是几就表示合并几个单元格。

如图↓

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        th,td{
            width: 100px;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td rowspan="2">6</td>
            <td colspan="2">7</td>
            <td colspan="2">8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td rowspan="2">11</td>
            <td>12</td>
        </tr>
        <tr>
            <td colspan="2">13</td>
            <td>14</td>
            <td>15</td>
        </tr>
    </table>
</body>
</html>

View Code

3、表格分区

标题:caption
表头:thead
主体:tbody

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        th,td{
            width: 100px;
        }
    </style>
</head>
<body>
    <table border="1">
        <caption>人物介绍</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>特点</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>老王</td>
                <td>50</td>
                <td>男</td>
                <td>卖瓜</td>
            </tr>
            <tr>
                <td>李红</td>
                <td>9</td>
                <td>女</td>
                <td>低智商</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>9</td>
                <td>男</td>
                <td>无智商</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

View Code

效果图↓

综合练习

如图↓

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        th,td{
            width: 100px;
        }
    </style>
</head>
<body>
    <table border="1">
        <caption>各地区固定资产投资情况</caption>
        <thead>
            <tr>
                <th rowspan="2">地区</th>
                <th colspan="2">按总量分</th>
                <th colspan="2">按比量分</th>
            </tr>
            <tr>
                <th>自年初累计(亿元)</th>
                <th>比去年周期增长(%)</th>
                <th>自年初累计(%)</th>
                <th>去年周期(%)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>全国</td>
                <td>167670.98</td>
                <td>9.6</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>东.地区</td>
                <td>64509.91</td>
                <td>10.9</td>
                <td>45.0</td>
                <td>44.5</td>
            </tr>
            <tr>
                <td>北京市</td>
                <td>2200.84</td>
                <td>7.0</td>
                <td>1.2</td>
                <td>1.2</td>
            </tr>
            <tr>
                <td>天津市</td>
                <td>5151.20</td>
                <td>10.5</td>
                <td>5.2</td>
                <td>2.7</td>
            </tr>
            <tr>
                <td>河北省</td>
                <td>5745.35</td>
                <td>11</td>
                <td>2.7</td>
                <td>5.2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

View Code

(前端)html与css，9、表格

1、表格基础

2、合并单元格

3、表格分区

综合练习

猜你喜欢