Table tag in html with attributes

HTML Tag

The tag is placed in the first row of the table. The text in it is bold and centered by default.

The

tag is not a mandatory element in the table, but we recommend to use it, as it helps to have better table layout as well as helps search engines better index the content of the table.

A more complex table can also include , , , , or elements.

It’s recommended not to use tables for page layout. Sometimes tables are misused in HTML for controlling a page layout. For that, you can use CSS as an alternative to HTML tables.

Syntax

The

tag comes in pairs. The content is written between the opening ( ) and closing (

) tags.

Example of the HTML tag:

html> html> head> title>Title of the document title> style> table < width: 80%; margin: 30px auto; border-collapse: collapse; > th, td < padding: 10px; border: 1px solid #666; > style> head> body> table> tr> th>Month th> th>Date th> tr> tr> td>June td> td>10.06.2018 td> tr> tr> td>July td> td>15.07.2018 td> tr> table> body> html>

Result

Attributes

The attributes of the

tag are not supported in HTML5. For styling tables use CSS properties listed below.

Attribute	Value	Description	CSS property
align	left center right	Defines how the table must be aligned according to the surrounding text. Not supported in HTML5.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Defines the background color for a table. Not supported in HTML5.	background-color
border	1 0	Defines the size of the frame surrounding the table. Not supported in HTML5.	border
cellpadding	pixels	Defines the space between the cell wall and the cell content. Not supported in HTML5.	border-collapse
cellspacing	pixels	Defines the space between cells. Not supported in HTML5.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Defines which side of the frame surrounding the table must be displayed. Not supported in HTML5.	border-style border-width
rules	none groups rows cols all	Defines which parts of inside borders should be visible. Not supported in HTML5.	border (Use this property correspondingly with thead, tbody, tfoot, col or colgroup HTML tags).
summary	text	Defines the summary for the content of a table. Not supported in HTML5.	caption-side
width	pixels	Defines the width of a table. Not supported in HTML5.	width

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

Text layout styles for tag:

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

• CSS text-shadow property adds shadow to text.
• CSS text-align-last property sets the alignment of the last line of the text.
• CSS line-height property specifies the height of a line.
• CSS letter-spacing property defines the spaces between letters/characters in a text.
• CSS word-spacing property sets the spacing between words.

Источник

HTML Tag

A simple HTML table, containing two columns and two rows:

More «Try it Yourself» examples below.

Definition and Usage

An HTML table may also include , , , , and elements.

Browser Support

Global Attributes

Event Attributes

More Examples

Example

How to add collapsed borders to a table (with CSS):

Month	Savings
January	$100
February	$80

Example

How to right-align a table (with CSS):

Example

How to center-align a table (with CSS):

Month	Savings
January	$100
February	$80

Example

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

Example

How to add padding to a table (with CSS):

Month	Savings
January	$100
February	$80

Example

How to set table width (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

Example

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 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.

Источник