HTML基础——table标签_html table怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/NCU_tanghulu/article/details/107731763

本文介绍了HTML中的table标签，包括表格的基本定义、标题、表头、行和单元格的标记用法，以及如何通过属性设置表格样式，如边框、对齐、背景色等。并提供了多个实例展示如何创建不同特性的表格。

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

HTML基础之table标签

一、定义

表格是网页中十分重要的组成元素。表格用来存储数据。表格包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格仅使用<table>是不够的，还需要定义表格中的行、列、标题等内容。在HTML页面中定义表格，需要学会以下几个标记。
1.表格标记<table>
<table>...</table> 标记表示整个表格。<table> 标记中有很多属性，例如width属性用来设置表格的宽度，border 属性用来设置表格的边框，align 属性用来设置表格的对齐方式，bgcolor 属性用来设置表格的背景色等。
2.标题标记<caption>
标题标记以<caption>开头，以结束，标题标记也有一些属性，例如align、valign 等。
3.表头标记<th>
表头标记以<th>开头，以</th>结束，也可以通过align、 background、 colspan、 valign 等属性来设置表头。
4.表格行标记<tr>
表格行标记以<tr>开头，以</tr>结束，一组<tr>标记表示表格中的一行。<tr> 标记要嵌套在<table>标记中使用，该标记也具有align、background 等属性。
5.单元格标记<td>
单元格标记<td>又称为列标记，一个<tr> 标记中可以嵌套若千个<td>标记。该标记也具有align、background、valign 等属性。

二、例子

创建表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 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>

在这里插入图片描述

创建各种带边框的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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="1">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>带有粗的边框：</h4>
<table border="8">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>带有很粗的边框：</h4>
<table border="15">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

显示表格的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h4>表头：</h4>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>电话</th>
        <th>电话</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
    <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th>电话</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <th>电话</th>
        <td>555 77 855</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

带有标题的表格

<h4>这个表格有一个标题，以及粗边框：</h4>

<table border="6">
<caption>我的标题</caption>
<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="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

在这里插入图片描述

设置表格的背景颜色和图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h4>背景颜色：</h4>
<table border="1"
       bgcolor="red">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>背景图像：</h4>
<table border="1"
       background="195.png">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

排列单元格内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="400" border="1">
    <tr>
        <th align="left">消费项目....</th>
        <th align="right">一月</th>
        <th align="right">二月</th>
    </tr>
    <tr>
        <td align="left">衣服</td>
        <td align="right">$241.10</td>
        <td align="right">$50.20</td>
    </tr>
    <tr>
        <td align="left">化妆品</td>
        <td align="right">$30.00</td>
        <td align="right">$44.45</td>
    </tr>
    <tr>
        <td align="left">食物</td>
        <td align="right">$730.40</td>
        <td align="right">$650.00</td>
    </tr>
    <tr>
        <th align="left">总计</th>
        <th align="right">$1001.50</th>
        <th align="right">$744.65</th>
    </tr>
</table>
</body>
</html>

在这里插入图片描述