举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > html表格代码 HTML 表格

html表格代码 HTML 表格

2023-03-20 14:31 HTML教程

html表格代码 HTML 表格

html表格代码

HTML表格是一种用于展示数据的常见方式,它可以帮助我们更好地理解和比较数据。HTML表格由行和列组成,其中每个单元格都可以包含文本、图片、链接或其他内容。

要创建一个 HTML 表格,需要使用

 标签。在 
标签中,可以使用
标签来创建表格的行和列。例如:

Name Age Gender
John Doe 30 Male

HTML 表格

HTML表格


每个表必须包含三个元素: table tr td

table

具有本地属性bordertable标记HTML文档中的表。

table 元素可以有 caption,colgroup,thead,tbody,tfoot,tr,th和td 元素。

table元素的summary,align,width,bgcolor,cellpadding,cellspacing,frame和rules属性已过时。

border 属性的值必须为1。边框的厚度必须使用CSS设置。

tr

tr 元素表示表行。

HTML表是面向行的,您必须分别表示每一行。

tr 元素可以在 table thead tfoot tbody 元素内使用。

tr 元素可以包含一个或多个 td th 元素。

align,char,charoff,valign bgcolor 属性已过时。你必须使用CSS。


td

td colspan,rowspan,headers 局部属性表示表单元格。

scope 属性已过时。请使用 th 元素上的 scope 属性。

abbr,axis,align,width,char,charoff,valign,bgcolor,height nowrap 属性已过时,因此必须使用CSS。

例子

您可以组合它们来创建表,如下面的代码所示。

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
  </table>
</body>
</html>

实例:长单元格

添加更长的单元格内容

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <td>A</td>
      <td>G</td>
      <td>M</td>
    </tr>
    <tr>
      <td>O</td>
      <td>O</td>
      <td>L</td>
    </tr>
    <tr>
      <td>E</td>
      <td>Long cell</td>
      <td>V</td>
    </tr>
  </table>
</body>
</html>

thead - 表头包装器

thead 元素定义一行或多行,这些行是table元素的列标签。

没有 thead 元素,所有的tr元素都被假定为属于表的主体。

align,char,charoff 和valign属性已过时。

以下代码显示将 thead 元素添加到实例表中。

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th {
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javascript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>C#</td>
        <td>MySQL</td>
        <td>PHP</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

th - 表头单元格

th 元素标记标题单元格,使我们能够区分数据及其描述。

th 元素的父代是 tr 元素。它具有局部属性: colspan,rowspan,scope,headers

abbr,axis,align,width,char,charoff,valign,bgcolor,height,和 nowrap 属性已过时,而你必须使用CSS。

以下代码向表中添加标题单元格。

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Color</th>
      <th>Size</th>
    </tr>
    <tr>
      <th>Favorite:</th>
      <td>Apples</td>
      <td>Green</td>
      <td>Medium</td>
    </tr>
    <tr>
      <th>2nd Favorite:</th>
      <td>Oranges</td>
      <td>Orange</td>
      <td>Large</td>
    </tr>
    <tr>
      <th>3rd Favorite:</th>
      <td>Pomegranate</td>
      <td>A kind of greeny-red</td>
      <td>Varies from medium to large</td>
    </tr>
  </table>
</body>
</html>

th td 元素在一行中混合在一起。它向表中添加垂直头和行头。

tbody - 表主体

tbody 元素标记表体的行,而不是标题行和页脚行。

align,char,charoff valign 属性已过时。

大多数浏览器在处理table>元素时会自动插入 tbody 元素,即使它在文档中未指定。依赖于表格布局的CSS选择器可能会失败。

例如,像 table > tr的选择器将不工作,因为浏览器在table tr 元素之间插入了一个 tbody

要解决这个问题,您必须使用选择器,如 table > tbody > tr table tr (no> character),甚至只是 tbody > tr

以下代码显示了向示例表中添加 tbody 元素。

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th {
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}
</style>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javascript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>C#</td>
        <td>MySQL</td>
        <td>PHP</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

tfoot 元素标记表页脚。

tfoot 元素可以出现在tbody tr 元素之前或之后。

align,char,charoff valign 属性已过时。

在HTML5之前, tfoot 元素必须出现在 tbody 元素之前。

在HTML5中,您可以将 tfoot 元素放在 tbody 或最后一个 tr 元素后面。

以下代码显示了如何使用 tfoot 元素为table元素创建页脚。

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th, tfoot th {
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th>Size</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Rank Footer</th>
        <th>Name Footer</th>
        <th>Color Footer</th>
        <th>Size Footer</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javacript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>Json</td>
        <td>Text</td>
        <td>CSV</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
阅读全文
以上是鳄鱼CMS为你收集整理的html表格代码 HTML 表格全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • html表单标签有哪些 HTML 表单标签

    html表单标签有哪些 HTML 表单标签

    2023-04-02 HTML教程

    HTML表单标签 label 元素为表单中的每个元素提供了一些上下文。它有局部属性: for,form 。例子以下代码显示了如何为用户提供一...

  • html资源网 HTML 资源链接

    html资源网 HTML 资源链接

    2023-05-06 HTML教程

    HTML资源链接 link 元素在HTML文档和之间创建关系外部资源,CSS样式表或Javascript文件。 link 元素具有局部属性: href,rel,hr...

  • html测验题 HTML 测验

    html测验题 HTML 测验

    2023-03-25 HTML教程

    您可以通过的测验程序来测试您的 HTML 技能。关于本测验本测验包含 20 道题,每道题的最长答题时间是 20 分钟(这是由于每个 ses...

  • html表单文本域代码 HTML 表单文本域

    html表单文本域代码 HTML 表单文本域

    2023-03-19 HTML教程

    HTML表单文本域使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用textarea标签。在表单元素...

  • vscodehtml插件 HTML 插件

    vscodehtml插件 HTML 插件

    2023-03-29 HTML教程

    HTML插件 插件的功能是扩展 HTML 浏览器的功能。 HTML 助手(插件) 辅助应用程序(helper application)是可由浏览器启动的程序...

© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们