HTML 表格基础

<table> 用行列展示数据——由 <tr>（行）、<td>（单元格）、<th>（表头）组成。

学完本章你将： 掌握 table/tr/td 基本结构、th 表头、caption 标题。

基本表格

html

<table border="1">
  <caption>学生成绩表</caption>
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>85</td>
    <td>92</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>90</td>
    <td>88</td>
  </tr>
</table>

标签说明

```

`
表格容器
`
表格行（table row）
`	`	表格数据单元格（table data）
`	`	表头单元格（加粗居中）
`
表格标题

搭配 CSS

html

<table style="border-collapse: collapse; width: 100%;">
  <tr style="background-color: #f2f2f2;">
    <th style="border: 1px solid #ddd; padding: 8px;">姓名</th>
    <th style="border: 1px solid #ddd; padding: 8px;">分数</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">小明</td>
    <td style="border: 1px solid #ddd; padding: 8px;">85</td>
  </tr>
</table>

🛠️ 学完试试这些工具

📄HTML 美化工具格式化混乱的 HTML 代码 🏷️HTML 实体转换实体编码 ↔ 字符互转 📋JSON 格式化处理 HTML 中的 JSON 数据 🎨颜色转换器HEX/RGB/HSL 颜色转换

网站图标 Favicon

表格边框