HTML表格制作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51735681/article/details/115486515

本文介绍了HTML中表格的创建，包括`<table>`, `<tr>`, `<td>`等标签的使用，以及表格边框、表头、标题、跨行跨列、单元格边距和间距的设置方法。通过实例展示了各种标签的效果。" 104942021,4133631,"解决OpenCV imshow报错：ASSERT: ""false"" in file qasciikey.cpp, line 501

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML中表格怎么制作：
首先来介绍一下HTML中的表格标签：
在这里插入图片描述

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据**（table data）**，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
接下来，我们举个例子来展示一下以上所介绍的标签的效果：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表格展示示例</title> 
</head>
<body>

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

以上代码运行出来的效果是这样的：
在这里插入图片描述
（---------------------------------------分割线--------------------------------------）
在HTML表格中，如果不定义边框属性，表格将不显示边框。这个属性有时很有用，但是大多数时候，我们希望显示边框。
以下是不带边框的表格举例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>不带边框的表格示例</title> 
</head>
<body>

<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

以上代码运行出来的效果是这样的：
在这里插入图片描述
通过以上对比，我们发现表格的边框属性是由border标签控制的。<table border="1">为1的时候，表格有边框，为0或者去掉border的时候，表示无边框。

（---------------------------------------分割线--------------------------------------）

HTML 中表格的表头：
表格的表头使用标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。
以下为表头举例代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表格的表头示例</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Adress</th>
</tr>
<tr>
  <td>Bill Hu</td>
  <td>555 77 856</td>
  <td>China</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Hu</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 856</td>
</tr>
<tr>
  <th>Adress:</th>
  <td>China</td>
</tr>
</table>

</body>
</html>

以上代码运行出来的结果：
在这里插入图片描述
（---------------------------------------分割线--------------------------------------）

HTML 中表格的标题：
表格的标题标签是<caption>标题</caption>
如下例所示：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表格的标题</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

以上代码运行出来的效果如图:
在这里插入图片描述
以上表格中，Monthly savings为表格标题。

（---------------------------------------分割线--------------------------------------）

HTML中跨行或者跨列的单元表格：
跨列标签是：colspan=" "，引号里面的数字表示所跨列数（如果为1就表示默认的只占一格）
跨行标签是： rowspan=" "，引号里面的数字表示所跨行数（如果为1就表示默认的只占一格）

代码举例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>跨行或者跨列的单元格</title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Hu</td>
  <td>555 77 856</td>
  <td>555 77 857</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Hu</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 856</td>
</tr>
<tr>
  <td>555 77 857</td>
</tr>
</table>

</body>
</html>

以上代码运行结果如图：
在这里插入图片描述
（---------------------------------------分割线--------------------------------------）

HTML 中表格内的标签（表格的嵌套）：
举例代码如下：

<!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>表格内的标签（表格的嵌套）</title>
</head>

<body>
    <table border="1">
        <tr>
            <td>
                <p>这个山谷是一个段落</p>
                <p>这是段落中的另外一行</p>
            </td>
            <td>
                <p>这个表格中包含一个单元格</p>
                <table border="1">
                    <tr>
                        <td>A</td>
                        <td>B</td>
                    </tr>
                    <tr>
                        <td>C</td>
                        <td>D</td>
                    </tr>
                </table>
                <tr>
                    <td>
                        <p>这个单元格包含一个列表</p>
                        <ul>
                            <li>apples</li>
                            <li>bananas</li>
                            <li>pineaapples</li>
                        </ul>
                    </td>
                    <td>HELLO</td>
                </tr>
            </td>
        </tr>
    </table>
</body>

</html>

以上代码运行出来的结果如图所示：
在这里插入图片描述
（---------------------------------------分割线--------------------------------------）

HTML 中表格的单元格边距：
控制单元格边距的标签是cellpadding=" "引号里面填入边距的大小，单位为px
这个标签一般是放在<table>中的。

（---------------------------------------分割线--------------------------------------）

HTML 中表格的单元格间距：
控制单元格边距的标签是cellspacing=" "引号里面是间距大小的数据。如果不定义标签cellspacing=" "，浏览器会默认没有单元格间距。
这个标签一般是放在<table>中的。
我们看下面这个例子：

<!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>单元格间距</title>
</head>

<body>
    <h4>没有单元格间距：</h4>
    <table border="1">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>second</td>
            <td>Row</td>
        </tr>
    </table>
    <h4>单元格间距="0"</h4>
    <table border="1" cellspacing="0">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>second</td>
            <td>Row</td>
        </tr>
    </table>
    <h4>单元表间距=“10”</h4>
    <table border="1" cellspacing="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>second</td>
            <td>Row</td>
        </tr>
    </table>
</body>

</html>