Table heading cell html

HTML Tag

A simple HTML table with three rows, two header cells and four data cells:

More «Try it Yourself» examples below.

Definition and Usage

The tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

• Header cells — contains header information (created with the element)
• Data cells — contains data (created with the element)

The text in elements are bold and centered by default.

Browser Support

Attributes

Attribute	Value	Description
abbr	text	Specifies an abbreviated version of the content in a header cell
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
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

Global Attributes

Event Attributes

More Examples

Example

How to align content inside (with CSS):

Example

How to add background-color to table header cell (with CSS):

Example

How to set the height of a table header cell (with CSS):

Example

How to specify no word-wrapping in table header cell (with CSS):

Example

How to vertical align content inside (with CSS):

Example

How to set the width of a table header cell (with CSS):

Example

How to create table headers:

Example

How to create a table with a caption:

Example

How to define table cells that span more than one row or one column:

Related Pages

Default CSS Settings

Most browsers will display the element with the following default values:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

EMIL	TOBIAS	LINUS

8:00
9:00
10:00
11:00
12:00
13:00

MON	TUE	WED	THU	FRI
8:00
9:00
10:00
11:00
12:00

DECEMBER

HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.

Example

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a element:

Example

Align Table Headers

By default, table headers are bold and centered:

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

To left-align the table headers, use the CSS text-align property:

Example

Header for Multiple Columns

You can have a header that spans over two or more columns.

Name		Age
Jill	Smith	50
Eve	Jackson	94

To do this, use the colspan attribute on the element:

Example

You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.

Table Caption

You can add a caption that serves as a heading for the entire table.

Monthly savings

Month	Savings
January	$100
February	$50

To add a caption to a table, use the tag:

Example

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

: The Table Header element

The HTML element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.

Try it

Attributes

This element includes the global attributes.

This attribute contains a short abbreviated description of the cell’s content. Some user-agents, such as speech readers, may present this description before the content itself.

This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1 . Values higher than 1000 will be considered as incorrect and will be set to the default value (1).

This attribute contains a list of space-separated strings, each corresponding to the id attribute of the elements that apply to this element.

This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is 1 ; if its value is set to 0 , it extends until the end of the table section ( , , , even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.

This enumerated attribute defines the cells that the header (defined in the ) element relates to. It may have the following values:

• row : The header relates to all cells of the row it belongs to.
• col : The header relates to all cells of the column it belongs to.
• rowgroup : The header belongs to a rowgroup and relates to all of its cells.
• colgroup : The header belongs to a colgroup and relates to all of its cells.

If the scope attribute is not specified, or its value is not row , col , or rowgroup , or colgroup , then browsers automatically select the set of cells to which the header cell applies.

Deprecated attributes

This enumerated attribute specifies how the cell content’s horizontal alignment will be handled. Possible values are:

• left : The content is aligned to the left of the cell.
• center : The content is centered in the cell.
• right : The content is aligned to the right of the cell.
• justify (with text only): The content is stretched out inside the cell so that it covers its entire width.
• char (with text only): The content is aligned to a character inside the element with minimal offset. This character is defined by the char and charoff attributes.

The default value when this attribute is not specified is left .

Note: Do not use this attribute as it is obsolete in the latest standard.

• To achieve the same effect as the left , center , right or justify values, apply the CSS text-align property to the element.
• To achieve the same effect as the char value, give the text-align property the same value you would use for the char .

This attribute contains a list of space-separated strings. Each string is the id of a group of cells that this header applies to.

Note: Do not use this attribute as it is obsolete in the latest standard: use the scope attribute instead.

This attribute defines the background color of each cell in a column. It consists of a 6-digit hexadecimal code as defined in sRGB and is prefixed by ‘#’.

The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If align is not set to char , this attribute is ignored.

Note: Do not use this attribute as it is obsolete in the latest standard. To achieve the same effect, you can specify the character as the first value of the text-align property.

This attribute is used to shift column data to the right of the character specified by the char attribute. Its value specifies the length of this shift.

Note: Do not use this attribute as it is obsolete in the latest standard.

This attribute is used to define a recommended cell height.

Note: Do not use this attribute as it is obsolete in the latest standard: use the CSS height property instead.

This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are:

• baseline : Positions the text near the bottom of the cell and aligns it with the baseline of the characters instead of the bottom. If characters don’t descend below the baseline, the baseline value achieves the same effect as bottom .
• bottom : Positions the text near the bottom of the cell.
• middle : Centers the text in the cell.
• and top : Positions the text near the top of the cell.

Note: Do not use this attribute as it is obsolete in the latest standard: use the CSS vertical-align property instead.

This attribute is used to define a recommended cell width. Additional space can be added with the cellspacing and cellpadding properties and the width of the element can also create extra width. But, if a column’s width is too narrow to show a particular cell properly, it will be widened when displayed.

Note: Do not use this attribute as it is obsolete in the latest standard: use the CSS width property instead.

Examples

Technical summary

Content categories	None.
Permitted content	Flow content, but with no header, footer, sectioning content, or heading content descendants.
Tag omission	The start tag is mandatory. The end tag may be omitted, if it is immediately followed by a or element or if there are no more data in its parent element.
Permitted parents	A element.
Implicit ARIA role	columnheader or rowheader
Permitted ARIA roles	Any
DOM interface	HTMLTableCellElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on May 26, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico

Table Cells

Each table cell is defined by a

and a

tag.

Everything between

and

are the content of the table cell.

Example

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Rows

Each table row starts with a

and ends with a

tag.

Example

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.

Table Headers

th stands for table header.

Example

Let the first row be table header cells:

By default, the text in elements are bold and centered, but you can change that with CSS.

HTML Exercises

HTML Table Tags

Tag	Description
	Defines a table
	Defines a header cell in a table
	Defines a row in a table
	Defines a cell in a table
	Defines a table caption
	Specifies a group of one or more columns in a table for formatting
	Specifies column properties for each column within a element
	Groups the header content in a table
	Groups the body content in a table
	Groups the footer content in a table

For a complete list of all available HTML tags, visit our HTML Tag Reference.

LEARN MORE

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник