HTML5中的表格

黑白土豆

已于 2023-12-17 22:47:21 修改

阅读量398

点赞数 3

文章标签： html 前端

于 2023-12-16 21:40:49 首次发布

本文链接：https://blog.csdn.net/2201_75652268/article/details/135038047

版权

1.HTML表格

（1）表格的基本结构以及语法

表格是由若干行和若干列组成的。在HTML中表格是由<table>标签对定义的，每个表格的行由<tr>标签对定义的，每行的单元格由<td>标签对定义的。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。但是一般情况不要使用表格嵌套表格。

语法：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>

<body>
    <table>
        <tr>
            <td>row 1，cell 1</td>
            <td>row 1，cell 2</td>
        </tr>
        <tr>
            <td>row 2，cell 1</td>
            <td>row 2，cell 2</td>
        </tr>
    </table>
</body>

</html>

运行结果：

在<table>标签对里面还有一个border属性可以设置，为了让读者可以看到每个单元格的位置。不过更推荐使用CSS样式来控制边框宽度。

（2）表格的表头

在表格的实际应用中，一般表格都会有一个表头，即表格标题，它使用<th>标签对来定义，同时会自动对<th>标签对的内容加粗。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>

<body>
    <table border="1">
        <th>
            表格标题的演示
        </th>
        <tr>
            <td>row 1，cell 1</td>
            <td>row 1，cell 2</td>
        </tr>
        <tr>
            <td>row 2，cell 1</td>
            <td>row 2，cell 2</td>
        </tr>
    </table>
</body>

</html>

运行结果：

由于表格有两列，但我设置的表头只有一个，所以右边的第一个格子是空的。

（3）表格的跨行和跨列

1.表格的跨行

跨行是指单元格在垂直方向上的合并，使用<td>标签对的rowspan属性来实现。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨行</title>
</head>

<body>
    <table border="1">
        <tr>
            <td rowspan="2">跨行内容</td>
            <td>第一行</td>
        </tr>
        <tr>
            <td>第二行</td>
        </tr>
    </table>
</body>

</html>

运行结果：

2.表格的跨列

跨列是指单元格的横向合并，使用<td>标签对的colspan属性来实现。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨列</title>
</head>

<body>
    <table border="1">
        <tr>
            <td colspan="2">跨行内容</td>
        </tr>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
        </tr>
    </table>
</body>

</html>

运行结果：