表格标签相关_牛客博客

(1)创建表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h3>这是 一个三行三列的表格</h3>
    <table width="500" height="300" border="1">
        <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>
</body>
</html>

注意:

<tr> </tr>中只能嵌套<td></td>
<td></td>标签,它就像一个容器,可以容纳所有的元素

(2)表格属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h3>这是 一个三行三列的表格</h3>
    <table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
        <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>
</body>
</html>

表格属性效果显示:

(3)表头标签:

表头一般位于表格的第一行或者第一列,其文本加粗居中,即为设置了表头的表格。
语法格式：用<th></th>替代相应的单元格标签<td></td>即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
        <caption>火影忍者演员表:</caption>
    <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
    </thead>

    <tbody>
            <tr>
                <td>鸣人</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>雏田</td>
                <td>女</td>
                <td>16</td>
            </tr>        
    </tbody>
    </table>
</body>
</html>

设置表头效果显示：

表格结构语法：使用<thead></thead>将表头包裹，使用<tbody></tbody>。
表格标题标签语法：写在<table></table>标签里面，<caption>设置表格标题</caption>。

(4)合并单元格：

1.跨行合并：rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
        <caption>火影忍者演员表:</caption>
    <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
    </thead>

    <tbody>
            <tr>
                <td>鸣人</td>
                <td>男</td>
                <td rowspan="2">不明</td>
            </tr>
            <tr>
                <td>雏田</td>
                <td>女</td>

            </tr>        
    </tbody>
    </table>
</body>
</html>

跨行合并效果显示。

2.跨列合并：colspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
        <caption>火影忍者演员表:</caption>
    <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
    </thead>

    <tbody>
            <tr>
                <td>鸣人</td>
                <td colspan="2">不明</td>
            </tr>
            <tr>
                <td>雏田</td>
                <td>女</td>
                <td >15</td>
            </tr>        
    </tbody>
    </table>
</body>
</html>

跨列合并效果显示：

表格总结：

表格提供了HTML中定义表格格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS的作用。