HTML5教程

HTML系列之表格标签

本文主要是介绍HTML系列之表格标签,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

表格存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,**常见显示、展示表格式数据。**因为它可以让数据显示的非常的规整,可读性非常好。

1、table标签

HTML的table元素表示表格数据-------即通过二维数据表表示的信息。

1)基本语法格式

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

2)常见的属性

表格标签table支持全局属性。

下列的border、cellspacing、cellpadding、width、height、align已经废弃,用CSS来代替。

2、thead、tbody、tfoot标签

HTML的<thead>元素定义了一组定义表格的列头的行。(题头)
HTML元素<tfoot>定义了一组表格中各列的汇总行。(脚注)
<tbody>标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。(正文)

1)基本语法格式

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

2)常见的属性

thead标签、tbody标签、tfoot标签支持全局属性。

3)总结

  • tbody元素应该与thead和tfoot元素结合起来使用。
  • 如果表包含一个<thead>块,则<tbody>块必须在它之后。

3、tr、td、th标签

HTML<tr>元素定义表格中的行。 同一行可同时出现<td><th>元素。
HTML<td>元素 定义了一个包含数据的表格单元格。
HTML<th>元素定义表格内的表头单元格。这部分特征是由scope和headers属性准确定义的。

1)基本语法格式

<table>
    <caption>Alien football stars</caption>
    <tr>
        <th scope="col">Player</th>
        <th scope="col">Gloobles</th>
        <th scope="col">Za'taak</th>
    </tr>
    <tr>
        <th scope="row">TR-7</th>
        <td>7</td>
        <td>4,569</td>
    </tr>
    <tr>
        <th scope="row">Khiresh Odo</th>
        <td>7</td>
        <td>7,223</td>
    </tr>
    <tr>
        <th scope="row">Mia Oolong</th>
        <td>9</td>
        <td>6,219</td>
    </tr>
</table>

2)常见的属性

tr标签、td标签、th标签支持全局属性。

4、表格标题caption

HTML<caption>元素 (or HTML 表格标题元素) 展示一个表格的标题, 它常常作为<table>的第一个子元素出现,同时显示在表格内容的最前面。

1)基本语法格式

<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

2)常见的属性

caption标签支持全局属性。

3)总结

  1. caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
  2. caption标签必须紧随table标签之后。

5、浏览器兼容性

在这里插入图片描述

6、合并单元格

合并单元格是我们比较常用的一个操作,但是不会合并的很复杂。

1)合并单元格2种方式

  • 跨行合并:rowspan=“合并单元格的个数”
  • 跨列合并:colspan=“合并单元格的个数”

在这里插入图片描述

2)合并单元格的顺序

合并单元格的顺序,我们按照先上后下,先左后右的顺序,跟我们以前学习汉字的书写顺序完全一致。

3)合并单元格的三步曲

  1. 先确定是跨行还是跨列合并
  2. 根据先上后下,先左右后的原则找到目标单元格,然后写上合并方式,还有要合并的单元格数量
  3. 删除多余的单元格

7、总结

  1. 表格中由行中的单元格组成。
  2. 表格中没有列元素,列的个数取决于行的单元格个数。

在这里插入图片描述
微信扫描二维码,关注前端老L

这篇关于HTML系列之表格标签的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!