table标签

最新推荐文章于 2024-07-12 00:07:26 发布

@牛二

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量7.7k

点赞数 10

文章标签： html

本文链接：https://blog.csdn.net/qq_50931436/article/details/117339557

版权

本文详细介绍了HTML中<table>标签的使用，包括border、width、height、align、cellspacing和cellpadding等属性，以及<thead>、<tbody>、<tfoot>、<tr>、<td>和相关属性的应用，例如<tr>的align属性、<td>的rowspan和colspan属性。通过实例展示了如何创建和格式化表格。

摘要由CSDN通过智能技术生成

<table> 标签用来定义表格。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table的属性与用法

表格标签
表格	意义
<table>	定义表格
<thead>	定义表格的页眉。
<tbody>	定义表格的主题。
<tfoot>	定义表格的页脚。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格的列。

1.<table>

1.1border

用于设置表格边框的宽度

不加border属性：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
</head>
<body>
	<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>
</body>
</html>

代码运行结果：

添加border属性：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
</head>
<body>
	<table 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>

代码运行结果：

1.2、width和height用来设置表格的宽度与长度(可以使用像素和百分比两种方式)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
</head>
<body>
	<table border="1" width="100" height="80%">
        <tr>
            <td>一行一列</td>
            <td>一行二列</td>
            <td>一行三列</td>
        </tr>
        <tr>
             <td>二行一列</td>
             <td>二行二列</td>
             <td>二行三列</td>
        </tr>
        <tr>
             <td>一行一列&