HTML表格学习

hzttaoh

已于 2024-01-24 17:30:54 修改

阅读量123

点赞数 2

文章标签： html 学习前端

于 2023-11-05 17:30:30 首次发布

本文链接：https://blog.csdn.net/2302_79340128/article/details/134232295

版权

学习HTML表格是创建网页内容中重要的一部分。HTML表格可以用来展示和组织数据，它由表格标签(<table>)、行标签(<tr>)、表头标签(<th>)和数据单元格标签(<td>)组成。

以下是一些HTML表格的基本用法和示例：

创建一个简单的表格：

<table>
  <tr>
    <td>行1，列1</td>
    <td>行1，列2</td>
  </tr>
  <tr>
    <td>行2，列1</td>
    <td>行2，列2</td>
  </tr>
</table>

添加表头：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

合并单元格：

<table>
  <tr>
    <th>姓名</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>85</td>
  </tr>
  <tr>
    <td>90</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>88</td>
  </tr>
</table>

设置表格边框和样式：

<table border="1" cellspacing="0" cellpadding="5">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

嵌套表格：

<table border="1">
  <tr>
    <td>主表格单元格</td>
    <td>
      <table>
        <tr>
          <td>嵌套表格单元格1</td>
          <td>嵌套表格单元格2</td>
        </tr>
        <tr>
          <td>嵌套表格单元格3</td>
          <td>嵌套表格单元格4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

表格示例：

<!DOCTYPE html>
<html>
<head>
    <title>HTML表格学习</title>
</head>
<body>
    <h1>学习HTML表格</h1>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </table>
</body>
</html>

上述代码中的关键部分是<table>元素，用于创建表格。

以下是一些HTML表格的基本概念：

<table>：用于创建表格的主要元素。
<tr>：表示表格的行（table row），通常包含在<table>内。一个表格可以有多个行。
<th>：表示表头单元格（table header），通常用于标识列的标题。<th>单元格会加粗并居中显示。
<td>：表示数据单元格（table data），通常包含实际的数据。<td>单元格中的内容通常是普通文本。

以下是一些常用的表格属性：