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不支持。 指定标题单元格的宽度 |
使用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>
扩展或生成<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>
设置<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>
翻译自: https://www.poftut.com/html-table-header-tag-tutorial-with-examples/
html上标下标标签 示例