03 HTML_网页中的表格_html网页制作表格代码-优快云博客

本文链接：https://blog.youkuaiyun.com/MengSao1001/article/details/123113096

本文详细介绍了HTML表格的基本结构，包括<table>, <tr>, <td>和<th>等标签的用法，以及如何通过border属性设置表格边框，使用<caption>添加表格标题，利用colspan和rowspan实现单元格的合并。此外，还提到了表格间的嵌套。" 115814232,10538896,使用matlab实现三维网格划分及有限元分析,"['matlab三维三角网格', '有限元分析', 'matlab编程', '数值计算']

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

<table></table> 定义表格区域

border 表格边框

<tr></tr> 定义表格的行

<td></td> 行中的单元格

<th></th> 表格表头

<caption></cantion> 表格标题

colspan 水平合并

rowspan 垂直合并

table border caption colspan rowspan

表格基本结构

一个最基本的HTML表格包括<table>,<tr>,<td>这三种标签，他们是双标签结构，这三个标签搭配使用就可以创建一个基础表格，其中<table></table>定义了一个表格的区域，<tr></tr>构成了表格的行，<td></td>是行中的一个单元格。

语法：

<table>

<tr>

</tr>

</table>

<body>
<table>
<tr>
<td>一行一列的单元格</td>
<td>一行二列的单元格</td>
<td>一行三列的单元格</td>
</tr>
<tr>
<td>二行一列的单元格</td>
<td>二行二列的单元格</td>
<td>二行三列的单元格</td>
</tr>
</table>
</body>
在浏览器中展示效果如下

表格边框属性border
语法：

border属性要写在<table>标签中，并且border属性值只表示是否显示表格边框，只

允许为“1”或者“ ” (默认值为：空)。

<body>
<table border="1">
<tr>
<td>一行一列的单元格</td>
<td>一行二列的单元格</td>
<td>一行三列的单元格</td>
</tr>
<tr>
<td>二行一列的单元格</td>
<td>二行二列的单元格</td>
<td>二行三列的单元格</td>
</tr>
</table>
</body>
在浏览器中展示效果如下

表格表头<th>
一般把<th>标签放在第一行<tr>内来使用，表示表格的表头。

<body>
<table border="1">
<tr>
<th>一行一列表头</th>
<th>一行二列表头</th>
<th>一行三列表头</th>
</tr>
<tr>
<td>一行一列的单元格</td>
<td>一行二列的单元格</td>
<td>一行三列的单元格</td>
</tr>
<tr>
<td>二行一列的单元格</td>
<td>二行二列的单元格</td>
<td>二行三列的单元格</td>
</tr>
</table>
</body>
在浏览器中展示效果如下：

表格标题<caption>
<caption>标签可以为表格添加一个标题。<caption>标签是双标签结构，必须写到<table>开始标签之后，每个表格只能设置一个标题。

<body>
  <table border="1">
    <caption>表格的标题</caption>
    <tr>
      <th>一行一列表头</th>
      <th>一行二列表头</th>
      <th>一行三列表头</th>
    </tr>
    <tr>
      <td>一行一列的单元格</td>
      <td>一行二列的单元格</td>
      <td>一行三列的单元格</td>
    </tr>
    <tr>
      <td>二行一列的单元格</td>
      <td>二行二列的单元格</td>
      <td>二行三列的单元格</td>
    </tr>
  </table>
</body>

在浏览器中的展示效果如下：

表格单元格合并
单元格水平跨度colspan

单元格垂直跨度rowspan

表格间嵌套

一个表格的单元格内部再嵌入另一个表格。

例子：

HTML代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套表格</title>
</head>
<body>
    <table border="1">
        <caption>表格嵌套（外层表格）</caption>
        <tr>
            <td rowspan="2">一行一列</td>
 
            <td>
            <table border="1">
                <tr>
                    <td>内层一行一列</td>
                </tr>
                <tr>
                    <td>内层二行一列</td>
                </tr>
            </table>
            </td>
 
            <td>一行三列</td>
        </tr>
 
        <tr>
            <td colspan="2">二行&nbsp;&nbsp;二&nbsp;三列</td>
 
        </tr>
    </table>
</body>
</html>

运行结果：