HTML Table tag
- The HTML table element inserts a table in the document.
- Tables are a very useful and powerful feature of the HTML language, as they give a solution for inserting any type of tabulated data in the document.
- This element is the main container of a table, but many other elements are needed to define a table correctly. Other elements that constitute a table are:
- Rows (HTML tr element)
- Cells (HTML td element)
- Header cells (HTML th element)
- Caption or title (HTML caption element)
- An HTML table can be basically considered as a set of rows containg cells and not backwards.
A table can be divided horizontally,
defining these sections:
- Header (HTML thead element)
- Body or bodies (HTML tbody element)
- Footer (HTML tfoot element)
- Tables consist of the
<table>element as well as other table-related elements. - These other elements are nested inside
the
<table>tags to determine how the table is constructed.
Decription
- An HTML table is an element comprised of table rows and columns, much like you'd see when working with an application such as Excel.
- Tables are container elements, and their sole purpose is to house other HTML elements and arrange them in a tabular fashion -- row by row, column by column.
- Tables may seem difficult at first, but after working through this lesson, you'll see that they aren't so horrible.
A table element consists of three different
HTML tags including the <table> tag, <tr> (table rows), and the
<td> (table columns) tags.
Attributes:>>>
1)
id (name)
The "id" attribute assigns
an identifier to the associated element.
This identifier must be unique in
the document and can be used to refer to that element in other instances (e.g.,
from client-side scripts).
2) class (cdata)
The "class" attribute assigns a class name (or a list of class names separated by spaces) to the container element.It's used together with style sheets and tells the browser the class (or classes) to which the element is associated with.
3) style (style)
This attribute is used to define presentational attributes for the containing element, and its value should be composed by style sheets properties.Although, in some cases, it can become useful, a better practice is to place presentational attributes in external files, relating them to elements with the "class" attribute.
This way you keep the semantic and presentational parts of your document separated.
4) title (text)
The purpose of this attribute is to provide a title for the element.Its value must be a short and accurate description of the element.
Browsers usually render it as a "tool tip" when the user puts the mouse pointer over the element for a small period of time.
5) lang (langcode)
Specifies the language of an element's content. The default value in "unknown".
This attribute indicates the
direction in which the texts of the element must be read.
This includes content, attribute
values and tables. It has two possible values that are case-insensitive:
- RTL: Right to left.
- LTR: Left to right.
7) border (pixels)
Defines the width of the border of a table as a number of pixels.8)cellpadding (length)
Defines the width of the space to be left between a cell's content and its border.
9) align
This attribute has been deprecated
in HTML 4.01. Therefore its use is no longer recommended.
It decides the horizontal alignment
of the table. Possible values (case-insensitive) are:
- left: The table is aligned to the left margin.
- right: The table is aligned to the right margin.
- center: The table is centered.
Example
<html>
<body>
<table
summary="Representation of how the pages of the website work in different
versions of Internet Explorer and Mozilla firefox">
<caption>Compatibility of the website in IE and FF</caption>
<colgroup></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th scope="row">Browser</th>
<th scope="col" colspan="3">Internet Explorer</th>
<th scope="col" colspan="2">Mozilla Firefox</th>
</tr>
<tr>
<th scope="col">Name</th>
<th scope="col">4.0</th>
<th scope="col">5.0</th>
<th scope="col">6.0</th>
<th scope="col">2.0</th>
<th scope="col">3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td>index.html</td>
<td>Ok</td>
<td>Ok</td>
<td rowspan="4">Ok</td>
<td>Ok</td>
<td rowspan="4">Ok</td>
</tr>
<tr>
<td>fullfunc.html</td>
<td>Bad</td>
<td>Partial</td>
<td>Partial</td>
</tr>
<tr>
<td>nofunc.html</td>
<td>Ok</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>panel.html</td>
<td>Bad</td>
<td>Partial</td>
<td>Partial</td>
</tr>
</tbody>
</table>
<caption>Compatibility of the website in IE and FF</caption>
<colgroup></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th scope="row">Browser</th>
<th scope="col" colspan="3">Internet Explorer</th>
<th scope="col" colspan="2">Mozilla Firefox</th>
</tr>
<tr>
<th scope="col">Name</th>
<th scope="col">4.0</th>
<th scope="col">5.0</th>
<th scope="col">6.0</th>
<th scope="col">2.0</th>
<th scope="col">3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td>index.html</td>
<td>Ok</td>
<td>Ok</td>
<td rowspan="4">Ok</td>
<td>Ok</td>
<td rowspan="4">Ok</td>
</tr>
<tr>
<td>fullfunc.html</td>
<td>Bad</td>
<td>Partial</td>
<td>Partial</td>
</tr>
<tr>
<td>nofunc.html</td>
<td>Ok</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>panel.html</td>
<td>Bad</td>
<td>Partial</td>
<td>Partial</td>
</tr>
</tbody>
</table>
</body>
</html>
