HTML中，table怎样使用

合集 - Justin的基础知识(6)

1.什么是MIME类型-基础知识补全03-032.object中的usemap是什么-HTML03-033.map标签是什么03-03

4.HTML中，table怎样使用03-03

5.程序，进程，线程的关系03-056.平方和平方根快速算法及其原理03-09

收起

<table> 标签用于在HTML中创建表格。表格是一种以行和列的形式组织和显示数据的结构化方式。<table> 标签通常与其他相关标签（如 <tr>、<th>、<td> 等）一起使用，以定义表格的结构和内容。

---

基本结构

一个基本的HTML表格由以下标签组成：

标签	描述
<table>	定义表格的容器。
<tr>	定义表格中的一行（table row）。
<th>	定义表格的表头单元格（table header），通常用于列标题，默认加粗并居中显示。
<td>	定义表格的数据单元格（table data），用于显示具体内容。
<caption>	为表格添加标题。
<thead>	定义表格的头部区域，通常包含表头行（<tr> 和 <th>）。
<tbody>	定义表格的主体区域，包含数据行（<tr> 和 <td>）。
<tfoot>	定义表格的底部区域，通常用于汇总行。

---

基本示例

以下是一个简单的表格示例：

<table border="1">
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
      <td>88</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>78</td>
      <td>92</td>
      <td>80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均分</td>
      <td>84</td>
      <td>88.5</td>
      <td>84</td>
    </tr>
  </tfoot>
</table>

---

代码解析

1. <table> 标签

   • border="1"：为表格添加边框（仅用于示例，实际开发中建议使用CSS设置样式）。

2. <caption> 标签

   • 为表格添加标题“学生成绩表”。

3. <thead> 标签

   • 定义表格的头部区域，包含表头行（<tr> 和 <th>）。

4. <tbody> 标签

   • 定义表格的主体区域，包含数据行（<tr> 和 <td>）。

5. <tfoot> 标签

   • 定义表格的底部区域，包含汇总行。

---

表格属性（已废弃，建议使用CSS）

以下是一些旧版HTML中用于设置表格样式的属性，但这些属性在现代HTML中已被废弃，建议使用CSS代替：

属性	描述
border	设置表格边框的宽度。
cellpadding	设置单元格内容与边框之间的间距。
cellspacing	设置单元格之间的间距。
width	设置表格的宽度。
align	设置表格的对齐方式（如 left、center、right）。

---

使用CSS美化表格

现代Web开发中，表格的样式应通过CSS设置。以下是一个使用CSS美化表格的示例：

<style>
  table {
    width: 100%;
    border-collapse: collapse; /* 合并边框 */
    font-family: Arial, sans-serif;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #f1f1f1;
  }
  caption {
    font-size: 1.2em;
    margin-bottom: 10px;
    font-weight: bold;
  }
</style>
 
<table>
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
      <td>88</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>78</td>
      <td>92</td>
      <td>80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均分</td>
      <td>84</td>
      <td>88.5</td>
      <td>84</td>
    </tr>
  </tfoot>
</table>

---

高级功能

1. 跨行和跨列
   使用 rowspan 和 colspan 属性可以实现单元格的跨行或跨列合并。

   示例：

   <table border="1">
     <tr>
       <th>姓名</th>
       <th colspan="2">成绩</th>
     </tr>
     <tr>
       <td>张三</td>
       <td>90</td>
       <td>85</td>
     </tr>
     <tr>
       <td rowspan="2">李四</td>
       <td>78</td>
       <td>92</td>
     </tr>
     <tr>
       <td>80</td>
       <td>88</td>
     </tr>
   </table>

2. 响应式表格
   对于小屏幕设备，可以使用CSS或JavaScript实现表格的响应式布局，例如水平滚动或折叠行。

---

总结

<table> 标签是HTML中用于创建表格的核心标签。通过结合 <tr>、<th>、<td> 等标签，可以轻松构建结构化数据表格。现代开发中，表格的样式应通过CSS设置，同时可以使用 rowspan 和 colspan 实现复杂的布局。