html5 table 例子
HTML5提供了一种创建表格的标记语言——table标签，可以方便地展示和组织数据。下面是关于HTML5 table的一些例子，以帮助读者更好地理解和使用这个标签。
1. 基本表格结构
```html
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
```
这个例子展示了一个基本的表格结构，包括表头和表体。表头使用`<thead>`标签包裹，表体使用`<tbody>`标签包裹。每一行使用`<tr>`标签表示，每一列使用`<td>`标签表示。
2. 表格标题和标题分组
```html
<table>
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th colspan="2">语文</th>
      <th colspan="2">数学</th>
    </tr>
    <tr>
      <th>姓名</th>
      <th>成绩</th>
      <th>姓名</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>90</td>
      <td>小明</td>
      <td>80</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>95</td>
      <td>小红</td>
      <td>90</td>
    </tr>
  </tbody>
</table>
```
这个例子展示了如何添加表格标题和标题分组。`<caption>`标签用于添加标题，`colspan`属性用于合并单元格。
html横向滚动条样式3. 表格边框样式和单元格合并
```html
<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 5px;
  }
</style>
<table>
  <thead>
    <tr>
      <th rowspan="2">姓名</th>
      <th colspan="2">语文</th>
      <th colspan="2">数学</th>
    </tr>
    <tr>
      <th>成绩</th>
      <th>排名</th>
      <th>成绩</th>
      <th>排名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>90</td>
      <td>1</td>
      <td>80</td>
      <td>2</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>95</td>
      <td>1</td>
      <td>90</td>
      <td>1</td>
    </tr>
  </tbody>
</table>
```
这个例子展示了如何设置表格边框样式和合并单元格。通过为`<table>`、`<th>`和`<td>`元素添加CSS样式可以设置边框样式和内边距。
4. 表格排序和过滤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。