HTML Tables

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

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

Example

      
 
Row 1, Column 1
 
Row 1, Column 2
 
 
Row 2, Column 1
 
Row 2, Column 2
 
 
   

This will produce the following result −

Table Heading

Example

      
 
Name
 
Salary
 
 
Ramesh Raman
 
5000
 
 
Shabbir Hussein
 
7000
 
 
   

This will produce the following result −

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.

Example

      
 
Name
 
Salary
 
 
Ramesh Raman
 
5000
 
 
Shabbir Hussein
 
7000
 
 
   

This will produce the following result −

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

Example

      
 
Column 1
 
Column 2
 
Column 3
 
 
Row 1 Cell 1
 
Row 1 Cell 2
 
Row 1 Cell 3
 
 
Row 2 Cell 2
 
Row 2 Cell 3
 
 
Row 3 Cell 1
 
 
   

This will produce the following result −

Tables Backgrounds

You can set table background using one of the following two ways −

• bgcolor attribute − You can set background color for whole table or just for one cell.
• background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these attributes.

Example

      
 
Column 1
 
Column 2
 
Column 3
 
 
Row 1 Cell 1
 
Row 1 Cell 2
 
Row 1 Cell 3
 
 
Row 2 Cell 2
 
Row 2 Cell 3
 
 
Row 3 Cell 1
 
 
   

This will produce the following result −

Here is an example of using background attribute. Here we will use an image available in /images directory.

      
 
Column 1
 
Column 2
 
Column 3
 
 
Row 1 Cell 1
 
Row 1 Cell 2
Row 1 Cell 3
 
 
Row 2 Cell 2
 
Row 2 Cell 3
 
 
Row 3 Cell 1
 
 
   

This will produce the following result. Here background image did not apply to table’s header.

Table Height and Width

You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.

Example

      
 
Row 1, Column 1
 
Row 1, Column 2
 
 
Row 2, Column 1
 
Row 2, Column 2
 
 
   

This will produce the following result −

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.

Example

      
This is the caption
 
row 1, column 1
row 1, columnn 2
 
 
row 2, column 1
row 2, columnn 2
 
 
   

This will produce the following result −

Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

• − to create a separate table header.
• − to indicate the main body of the table.
• − to create a separate table footer.

A table may contain several elements to indicate different pages or groups of data. But it is notable that and tags should appear before

Example

      
 
 
This is the head of the table
 
 
 
 
This is the foot of the table
 
 
 
 
Cell 1
 
Cell 2
 
Cell 3
 
Cell 4
 
 
 
   

This will produce the following result −

Nested Tables

Example

Following is the example of using another table and other tags inside a table cell.

      
 
 
 
 
Name
 
Salary
 
 
Ramesh Raman
 
5000
 
 
Shabbir Hussein
 
7000
 
 
 
 
 
   

This will produce the following result −

Источник

Html tags в таблице

Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.

Синтаксис

Атрибуты

align Определяет выравнивание таблицы. background Задает фоновый рисунок в таблице. bgcolor Цвет фона таблицы. border Толщина рамки в пикселах. bordercolor Цвет рамки. cellpadding Отступ от рамки до содержимого ячейки. cellspacing Расстояние между ячейками. cols Число колонок в таблице. frame Сообщает браузеру, как отображать границы вокруг таблицы. height Высота таблицы. rules Сообщает браузеру, где отображать границы между ячейками. summary Краткое описание таблицы. width Ширина таблицы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

       
Таблица размеров обуви
 
Россия
 
Великобритания
 
Европа
 
Длина ступни, см
 
 
34,5
3,5
36
23
 
35,5
4
36⅔
23–23,5
 
36
4,5
37⅓
23,5
 
36,5
5
38
24
 
37
5,5
38⅔
24,5
 
38
6
39⅓
25
 
38,5
6,5
40
25,5
 
39
7
40⅔
25,5–26
 
40
7,5
41⅓
26
 
40,5
8
42
26,5
 
41
8,5
42⅔
27
 
42
9
43⅓
27,5
 
43
9,5
44
28
 
43,5
10
44⅔
28–28,5
 
44
10,5
45⅓
28,5–29
 
44,5
11
46
29
 
45
11,5
46⅔
29,5
 
46
12
47⅓
30
 
46,5
12,5
48
30,5
 
47
13
48⅔
31
 
48
13,5
49⅓
31,5
 
  

Статьи по теме

• Атрибуты тега
• Вложенные таблицы
• Выравнивание таблиц
• Выравнивание элементов
• Заголовок таблицы
• Колонки таблицы
• Макет из двух колонок
• Макет из двух колонок
• Макет из трех колонок
• Макет из трёх колонок
• Объемная таблица
• Особенности верстки слоями
• Особенности таблиц
• Особенности таблиц
• Применение таблиц
• Простая таблица
• Разрезание и склейка изображений
• Сетка таблицы
• Строки таблицы
• Таблица без рамки
• Таблица с рамкой
• Таблицы
• Таблицы и стили
• Таблицы и стили
• Теги для таблиц

Источник

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.

Источник