html上标下标标签示例_带有示例HTML th表标题标签教程

最新推荐文章于 2024-05-03 22:21:39 发布

cunjiu9486

最新推荐文章于 2024-05-03 22:21:39 发布

阅读量1.1k

点赞数

文章标签： css html html5 数据可视化 css3

原文链接：https://www.poftut.com/html-table-header-tag-tutorial-with-examples/

版权

html上标下标标签示例

HTML provides table structure which consists of rows, columns or cells. During the creation of the table, multiple tags are used. <th> is a tag used to create a table header. A table header is a label that is put to the first row in order to explain the row or column data. <th> tag is an essential HTML tag that is supported by all major browsers like Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge, etc.

HTML提供了由行，列或单元格组成的表结构。在创建表期间，将使用多个标签。 <th>是用于创建表头的标签。表标题是放置在第一行的标签，用于解释行或列数据。 <th>标签是必需HTML标签，所有主要浏览器(例如Google Chrome，Mozilla Firefox，Opera，Safari，Microsoft Edge等)都支持。

标头单元格与标准单元格 (Header Cell vs Standard Cell)

Tables are used to provide tabular data in a readable and elegant way. The table consists of multiple cells that are mostly used to store given data which is number, text even image. But in order to show these data and provide information about the cells, rows, and columns table header cell is used.

表用于以可读和简洁的方式提供表格数据。该表由多个单元格组成，这些单元格通常用于存储给定数据，即数字，文本甚至图像。但是为了显示这些数据并提供有关单元格，行和列的信息，使用了表头单元格。

使用表头创建表(Create A Table with Table Headers)

In order to create a table header, we will use the <th> tag. Table header tags are put as the first block of the <table>. In the following example, we will create two table headers named Month and Customer .

为了创建表头，我们将使用<th>标记。表标题标签被放置为<table>的第一块。在下面的示例中，我们将创建两个名为Month和Customer表头。

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h1>The table header example</h1>

<table>
<tr>
<th>Month</th>
<th>Customer</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
</tr>
</table>

</body>
</html>

<th>表头属性(<th> Table Header Attributes)

<th> table header provides some attributes which are listed below. But with the HTML5 most of these attributes became absolute. But they can be used currently without a problem for most of the browsers but feature use is inconsistent.

<th>表头提供了一些属性，在下面列出。但是，有了HTML5，这些属性中的大多数变成了绝对属性。但是，大多数浏览器目前都可以正常使用它们，但是功能使用不一致。

Attribute	Value	Description
abbr	text	Specifies an abbreviated version of the content in a header cell
align	left right center justify char	Not supported in HTML5. Aligns the content in a header cell
axis	category_name	Not supported in HTML5. Categorizes header cells
bgcolor	rgb(x,x,x) #xxxxxx colorname	Not supported in HTML5. Specifies the background color of a header cell
char	character	Not supported in HTML5. Aligns the content in a header cell to a character
charoff	number	Not supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute
colspan	number	Specifies the number of columns a header cell should span
headers	header_id	Specifies one or more header cells a cell is related to
height	pixels %	Not supported in HTML5. Sets the height of a header cell
nowrap	nowrap	Not supported in HTML5. Specifies that the content inside a header cell should not wrap
rowspan	number	Specifies the number of rows a header cell should span
scope	col colgroup row rowgroup	Specifies whether a header cell is a header for a column, row, or group of columns or rows
valign	top middle bottom baseline	Not supported in HTML5. Vertical aligns the content in a header cell
width	pixels %	Not supported in HTML5. Specifies the width of a header cell

属性	值	描述
缩写	文本	在标题单元格中指定内容的缩写形式
对齐	剩下对中央证明烧焦	HTML5不支持。在标题单元格中对齐内容
轴	分类名称	HTML5不支持。分类标题单元格
bgcolor	rgb(x，x，x) #xxxxxx 颜色名称	HTML5不支持。指定标题单元格的背景色
烧焦	字符	HTML5不支持。将标题单元格中的内容与字符对齐
夏洛夫	数	HTML5不支持。设置将从char属性指定的字符对齐内容的字符数
科尔斯潘	数	指定标题单元格应该跨越的列数
标头	header_id	指定一个或多个与单元相关的标题单元
高度	像素％	HTML5不支持。设置标题单元格的高度
Nowrap	Nowrap	HTML5不支持。指定标头单元格内的内容不应换行
行跨	数	指定标题单元格应跨越的行数
范围	关口同事行行组	指定标题单元格是列，行还是一组列或行的标题
垂直对齐	最佳中间底部基线	HTML5不支持。垂直对齐标题单元格中的内容
宽度	像素％	HTML5不支持。指定标题单元格的宽度

<th> Table Header Attributes

<th>表头属性

使用CSS设置<th>表头样式(Set <th> Table Header Style with CSS)

We can use CSS properties in order to change the style of the <th> table header. We can CSS properties for styling like background color, text size, etc. for the table header. In the following example, we will use the inline CSS style attribute in order to set the table header background yellow.

我们可以使用CSS属性来更改<th>表头的样式。我们可以为表格标题设置CSS属性以进行样式设置，例如背景颜色，文本大小等。在下面的示例中，我们将使用内联CSS样式属性以将表标题背景设置为黄色。

<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }

</style>
</head>
<body>

  <h1>The table header example</h1>

    <table>
      <tr>
        <th style="background-color: yellow">Month</th>
        <th style="background-color: yellow">Customer</th>
      </tr>
      <tr>
        <td>January</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>February</td>
        <td>1200</td>
      </tr>
    </table>

</body>
</html>

Alternatively we can use <style> tag to put some CSS styling to the <th> table header like below.

另外，我们可以使用<style>标记将一些CSS样式添加到<th>表头中，如下所示。

<style>
th {
background-color: yellow;
}
</style>

对齐<th>表标题内容 (Align <th> Table Header Content)

Table header contents can be aligned in different directions. align attribute is used to align the table header content and left , center ,right , justify and char can be used as an alignment direction. But keep in mind that align attribute it obsolete with HTML5.

表标题的内容可以在不同的方向上对齐。 align属性用于对齐表标题的内容，并且left ， center ， right ， justify和char可以用作对齐方向。但是请记住，align属性在HTML5中已过时。

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}

</style>
</head>
<body>

<h1>The table header example</h1>

<table>
<tr>
<th align="right">Month</th>
<th align="center">Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
</tr>
</table>

</body>
</html>

设置<th>表头的背景色(Set Background Color of <th> Table Header)

The background color of the table header can be set by using attribute bgcolor. We can also use CSS properties to set the background color which is explained above. The attribute bgcolor value can be name of the color or the hexadecimal presentation of the RGB code.

可以使用属性bgcolor设置表头的背景色。我们还可以使用CSS属性来设置背景颜色，如上所述。属性bgcolor值可以是颜色的名称或RGB代码的十六进制表示形式。

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}

</style>
</head>
<body>

<h1>The table header example</h1>

<table>
<tr>
<th bgcolor="blue">Month</th>
<th bgcolor="yellow">Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
</tr>
</table>

</body>
</html>

Set Background Color of <th> Table Header

扩展或生成<th>表标题到多列(Extend or Spawn <th> Table Header To Multiple Columns)

We can span or extend a single table header into multiple columns by using attribute colspan. We will provide the number of the columns we want to span. In the following example, we will span 2 columns where both will be put under the Customer table header.

通过使用属性colspan我们可以将单个表头扩展或扩展为多列。我们将提供我们要跨越的列数。在下面的示例中，我们将跨越2列，这两列都将放在Customer表标题下。

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}

</style>
</head>
<body>

<h1>The table header example</h1>

<table>
<tr>
<th>Month</th>
<th colspan=2>Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
<td>200000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
<td>2200000000</td>
</tr>
</table>

</body>
</html>

Extend or Spawn <th> Table Header To Multiple Columns

设置<th>表头的宽度(Set Width of <th> Table Header )

By default, the table header width will be set according to other cells in the same row. But you can set the table header explicitly width by using attribute width. In the following example, we will set the table header width to 500px.

默认情况下，将根据同一行中的其他单元格设置表标题宽度。但是您可以使用属性width显式设置表头的width 。在下面的示例中，我们将表格标题的宽度设置为500px。

<html>
   <head>
      <style>
         table, th, td {
         border: 1px solid black;
         }
      </style>
   </head>
   <body>
      <h1>The table header example</h1>
      <table>
         <tr>
            <th>Month</th>
            <th width=500>Customer</th>
         </tr>
         <tr>
            <td>January</td>
            <td>100000000</td>
         </tr>
         <tr>
            <td>February</td>
            <td>1200000000</td>
         </tr>
      </table>
   </body>
</html>

LEARN MORE How to Install Mariadb / Mysql Server in Linux Fedora, CentOS and RedHat?

了解更多如何在Linux Fedora，CentOS和RedHat中安装Mariadb / Mysql Server？

翻译自: https://www.poftut.com/html-table-header-tag-tutorial-with-examples/

html上标下标标签示例

cunjiu9486

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html上标下标标签示例_带有示例HTML th表标题标签教程

html上标下标标签示例HTML provides table structure which consists of rows, columns or cells. During the creation of the table, multiple tags are used. <th> is a tag used to create a table header. A tabl...
复制链接

扫一扫