HTML — Урок 10. Работа с таблицами сложной структуры
Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:
| шапка сайта | |
| меню | контент |
| низ сайта | |
Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из трех строк и двух столбцов фиксированной ширины.
| шапка сайта | |
| меню | контент |
| низ сайта |
Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра colspan тега <td>. Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.
Table inside another Table
Nesting tables simply means making a Table inside another Table. Nesting tables can lead to complex tables layouts, which are both visually interesting and have the potential of introducing errors depends on its nesting nature.
Tables within Tables
Nested Table always need to be placed between . tags of the outer container Table. You can format nested tables as you would format any other HTML Table.
The following HTML code create a Table with one row and two column and inside the second column again create another table (nested table) with two rows.
In the above picture the outer table with red colors and Inner table with Green color.
HTML Source Code :
Tables inside a Table Cell
Nesting tables can lead to more complex tables, inner Table should begin and end in the same cell of the outer container table. You can nested tables any number of levels. The following HTML code create a four level nested tables.
In the above picture the outermost table with color Red and nested table with color Green , Yellow and Blue respectively.
HTML Source Code :
You can format or placed other HTML Tags inside nested tables as you would do any other HTML Table. The following HTML code create an outer Table with two rows and each row has two columns. Each nested table add other HTML tags like Image, Links , List , Text etc.
HTML Source Code :
The more tables you have nested inside one another, the slower the page will load. It gets more complicated for the browser to render, and so the page loads more slowly.
# Tables
The HTML <table> element allows web authors to display tabular data (such as text, images, links, other tables, etc.) in a two dimensional table with rows and columns of cells.
# Simple Table
This will render a <table> consisting of three total rows ( <tr> ): one row of header cells ( <th> ) and two rows of content cells ( <td> ). <th> elements are tabular headers and <td> elements are tabular data. You can put whatever you want inside a <td> or <th> .
# Spanning columns or rows
Table cells can span multiple columns or rows using the colspan and rowspan attributes. These attributes can be applied to <th> and <td> elements.
Will result in
Note that you should not design a table where both rows and columns overlap as this is invalid HTML and the result is handled differently by different web browsers.
rowspan = A non-negative integer that specifies the number of rows spanned by a cell. The default value of this attribute is one ( 1 ). A value of zero ( 0 ) means that the cell will extend from the current row until the last row of the table ( <thead> , <tbody> , or <tfoot> ).
colspan = A non-negative integer that specifies the number of columns spanned by the current cell. The default value of this attribute is one ( 1 ). A value of zero ( 0 ) means that the cell will extend from the current to the last column of the column group <colgroup> in which the cell is defined.
# Column Groups
Sometimes you may want to apply styling to a column or group of columns. Or for semantic purposes, you may want to group columns together. To do this, use <colgroup> and <col> elements.
The optional <colgroup> tag allows you to group columns together. <colgroup> elements must be child elements of a <table> and must come after any <caption> elements and before any table content (e.g., <tr> , <thead> , <tbody> , etc.).
The optional <col> tag allows you to reference individual columns or a range of columns without applying a logical grouping. <col> elements are optional, but if present, they must be inside a <colgroup> element.
The following CSS styles can be applied to <colgroup> and <col> elements:
For more information, see HTML5 Tabular data
# Table with thead, tbody, tfoot, and caption
HTML also provides the tables with the <thead> , <tbody> , <tfoot> , and <caption> elements. These additional elements are useful for adding semantic value to your tables and for providing a place for separate CSS styling.
When printing out a table that doesn’t fit onto one (paper) page, most browsers repeat the contents of <thead> on every page.
There’s a specific order that must be adhered to, and we should be aware that not every element falls into place as one would expect. The following example demonstrates how our 4 elements should be placed.
The following example’s results are demonstrated twice—the first table lacks any styles, the second table has a few CSS properties applied: background-color , color , and border *. The styles are provided as a visual guide and is not an essential aspect of the topic at hand.
| Element | Styles Applies |
|---|---|
| <caption> | Yellow text on black background. |
| <thead> | Bold text on purple background. |
| <tbody> | Text on blue background. |
| <tfoot> | Text on green background. |
| <th> | Orange borders. |
| <td> | Red borders. |
# Heading scope
th elements are very commonly used to indicate headings for table rows and columns, like so:
This can be improved for accessibility by the use of the scope attribute. The above example would be amended as follows:
scope is known as an enumerated attribute, meaning that it can have a value from a specific set of possible values. This set includes:
- col
- row
- colgroup
- rowgroup
# Syntax
- <table></table>
- <thead></thead>
- <tbody></tbody>
- <tfoot></tfoot>
- <tr></tr>
- <th></th>
- <td></td>
# Remarks
The various table elements and their content attributes together define the table model. The <table> element is the container element for table models/tabular data. Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table’s cells must completely cover that grid without overlap. The list below describes the various elements in the table model:
- <table> — The container element for table models/tabular data. <table> represents data with more than one dimension in the form of a table.
- <caption> — Table caption or title (Like a figcaption to a figure )
- <col> — A column (a no-content element)
- <colgroup> — A grouping of columns
- <thead> — Table header (only one)
- <tbody> — Table body / content (multiple are okay)
- <tfoot> — Table footer (only one)
- <tr> — Table row
- <th> — Table header cell
- <td> — Table data cell
Semantically, tables are meant for holding tabular data. You can think of it as a way to display and describe data that would make sense in a spreadsheet (columns and rows).
Using tables for layout is not recommended. Instead, use CSS rules for layout and formatting, including display: table .
One notable exception typically displayed in the industry regarding using <table> layout is in regards to HTML email: some email clients, including Outlook, rolled back to older rendering engines after Microsoft lose their monopoly case vs. the EU. In order for Microsoft to make IE not part of the OS, they simply rolled back Outlook’s rendering engine to an earlier version of Trident. This rollback simply doesn’t support modern web technologies, so using <table> based layouts for HTML email is the only way to ensure cross-browser/platform/client compatibility.
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
A simple HTML table:
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> 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 <tr> and ends with a </tr> tag.
tr stands for table row.
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
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
th stands for table header.
Example
Let the first row be table header cells:
By default, the text in <th> elements are bold and centered, but you can change that with CSS.
HTML Exercises
HTML Table Tags
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
For a complete list of all available HTML tags, visit our HTML Tag Reference.