Article snapshot taken from Wikipedia with creative commons attribution-sharealike license.
Give it a read and then ask your questions in the chat.
We can research this topic together.
You must add a |reason= parameter to this Cleanup template – replace it with {{Cleanup|October 2006|reason=<Fill reason here>}}, or remove the Cleanup template.
Schema of CSS Table Layers.
Table is a HTML tag for creating boxes on web pages and to display data in those boxes.
<table>…</table>
table { display: table }
Creates a table
<caption>…</caption>
caption { display: table-caption }
Specifies a caption for the entire table.
<colgroup>…</colgroup>
colgroup { display: table-column-group }
Specifies a column group in a table.
<col />
col { display: table-column }
Specifies attributes for an entire column in a table.
<thead>…</thead>
thead { display: table-header-group }
Specifies the header part of a table. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media).
<tfoot>…</tfoot>
tfoot { display: table-footer-group }
Specifies the footer part of a table. Like <thead>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media)
<tbody>…</tbody>
tbody { display: table-row-group }
Specifies the main part of a table.
<tr>…</tr>
tr { display: table-row }
Creates a row in the table.
<th>…</th>
th { display: table-cell }
Creates a table header cell within a row; contents are conventionally displayed bold and centered. An aural user agent may use a louder voice for these items.
{| border="1" ! Header Cell: Column 1 !! Header Cell: Column 2
|-
| Data Cell: Row2 Column1 || Data Cell: Row2 Column1
|-
| Data Cell: Row3 Column1 || Data Cell: Row3 Column1
|}
Below Table is displayed by using Wiki-markup code:
Header Cell: Column 1
Header Cell: Column 2
Data Cell: Row2 Column1
Data Cell: Row2 Column1
Data Cell: Row3 Column1
Data Cell: Row3 Column1
Note: "!" in header row causes bold display.
Note: To display | (pipe symbol), < (less than sign), ! (exclamation mark), { (beginning second/curly bracket) etc symbols, when used inside an wiki table, you should use following HTML decimal or entity codes: | for | symbol, < or < for < symbol, ! for ! symbol, { for { symbol, } for } symbol. For more, see http://en.wikipedia.org/Windows_Alt_keycodes.
CAPTION
Table caption is a title of the table.
HTML : <caption> ... </caption>
HTML : <caption params> ... </caption>
CSS : CAPTION { display: table-caption }
CAPTION tag can have "align" (HTML)(Deprecated) parameter, and/or "caption-side" css/stylesheet property. Other parameters (params) it can have are class, id, title, lang, dir.
HTML : ( align = "top | bottom | left | right" ).
CSS : ( caption-side: top | bottom | left | right | inherit ; ).
By default, caption uses align="top".
In the rightside table, the texts "Caption at bottom" are displaying a bottom side caption.
Note: caption is using both HTML and stylesheet parameter. HTML parameter (align) is included for compatibility with IE (~v6.0) or similar web browser software, which doesn't support the stylesheet property yet (June, 2006). Future browsers will probably recognize only the stylesheet property instead of the HTML parameter.
Table column groups and columns : colgroup, col, colgroup col.
HTML : <colgroup> ... </colgroup>
CSS : COLGROUP { display: table-column-group }
HTML : <colgroup params> ... </colgroup>
HTML : <col>
CSS : COL { display: table-column }
HTML : <col params>
HTML : <col />
HTML : <col params />
HTML : <colgroup> <col /> ... </colgroup>
HTML : <colgroup params> <col params /> ... </colgroup>
colgroup & col can have following parameters (params): span, width, align, char, charoff, valign, style, lang, dir, title, id, class.
HTML ( span = column_numbers ).
HTML ( align = " left | center | right | justify | char " ).
See TBODY for examples.
THEAD
See TBODY.
TFOOT
See TBODY.
TBODY
Table rowgroups : thead, tfoot, tbody.
HTML : <thead> ... </thead>
HTML : <tfoot> ... </tfoot>
HTML : <tbody> ... </tbody>
CSS : THEAD { display: table-header-group }
CSS : TFOOT { display: table-footer-group }
CSS : TBODY { display: table-row-group }
These three tags can have following parameters (params): align, char, charoff, valign, style, lang, dir, title, id, class. "tfoot" tag must appear before tbody for browser soft to know where to render/place it.
HTML ( align = " left | center | right | justify | char " ).
CSS ( text-align: left | right | center ; ).
HTML ( valign = " top | middle | bottom | baseline " ).
CSS ( vertical-align: top | middle | bottom | baseline ; ).
HTML ( char = character ).
HTML ( charoff = length ).
Column and Row groups
When large numbers of items or objects are needed to be displayed on the web page (or pages) with various associated or related data next to the item or object, then grouping is necessary. Data grouping identifies, differentiates and displays each item and related data in an easy understandable way, by using different color, or, boxes with different border width, etc.
Column and Row groups for cross browsers
Below table uses the colgroup, col, thead, tfoot, tbody, (tr, th, td) HTML tags with the following (HTML) parameters and (CSS) properties: border-collapse, border, border-top, border-right, border-bottom, border-left, cellspacing, border-spacing, cellpadding, padding, cols, rules, colspan, rowspan, etc.
To display the above table (Unicode Number Forms Character List) with similar border width appearance in the Firefox (FF), Internet Explorer (IE), etc web browsers, which uses different rendering engines, below codes needs to be implemented, which are using functionally redundant HTML tags and parameters (and/or CSS properties) to bring the table appearance almost same across different browsers. Parameter scope is not a must required for same appearance, it is useful mostly for the speech processor.
Column and Row groups with CSS border width supported browsers
Below table's appearance was rendered by the Gecko (/Mozilla /Mozilla Firefox (FF)) type of web-browser (/engine), and it contains shortest (less amount of) codes, for the same appearance, because, cells' properties are not individually defined, but instead they inherit those from the column and row groups. It uses the colgroup, col, thead, tfoot, tbody, (tr, th, td), etc HTML tags with the following (HTML) parameters and (CSS) properties: border-collapse, border, border-right, border-left, padding, colspan, rowspan, etc. Mozilla web-browsers renders properly the colgroup, col, thead, tfoot, tbody tags with CSS properties border width, border style, border color, but Trident (/MSHTML /Internet Explorer (IE) v6.0) engines (/web-browsers) fails to do that (June 2006). On the other hand, Trident engine browsers renders text color specified in both column and row groups (for both text and border), but Gecko engine browsers fails to do that for column groups (June 2006). These browsers renders the width and align parameters properly, when specified in the column and row groups tags.
To display the above table with similar border width appearance in the FF web browsers, below codes are required.
Column and Row groups with CSS border width non-supported browsers
IE (v6.0) renders all internal borders with 1px width by default, for the above table code. It doesn't support border width CSS properties, inside the column or row groups tags. So all appropriate individual cell, individually needs to have the border width CSS properties and values, for widening the cell borders for data grouping, and by doing so, code becomes longer. Below codes will keep the table appearance same in Gecko, Trident, etc browsers. If the contents of tfoot is placed as last data (tr) lines, then thead, tfoot, tbody tags and rules parameter can be removed.
To display the above table with similar border width appearance in the IE (and other) web browsers, below codes can be used.
Wiki table doesn't support colgroup, col, thead, tfoot, tbody tags yet (June, 2006). So all appropriate individual cell, individually needs to have the border width CSS properties and values, for widening the cell borders for data grouping, and by doing so, code becomes longer, for a table with more items. Below codes will keep the table appearance same in Gecko, Trident, etc browsers.
Unicode (ISO 10646) Number Forms Character List (Partial 03)
This tag can have following parameters: scope, width, height, abbr, axis, rowspan, colspan, bgcolor, nowrap, style, lang, dir, title, id, class. See TD.
This tag can have following parameters: headers, scope, width, height, abbr, axis, rowspan, colspan, bgcolor, nowrap, style, lang, dir, title, id, class.
HTML ( headers = id_refs ).
HTML ( scope = row | col | rowgroup | colgroup ).
HTML ( abbr = text ).
HTML ( axis = category_data_name(s list) ).
HTML ( rowspan = row_number(s) ).
HTML ( colspan = column_number(s) ).
HTML ( nowrap ) (Deprecated, Use CSS).
CSS ( white-space: normal | pre | nowrap ; ).
HTML ( width = length ) (Deprecated, Use CSS).
HTML ( height = length ) (Deprecated, Use CSS).
CSS ( height: length ; ).
Rowspan, Colspan
Another simple HTML table is displayed below, applying the rowspan and colspan parameters:
To obtain the above exact table with same appearance, we have to apply below wiki code, because, appearance of default wiki table is different from default HTML table. In below codes, you may need to replace the default border color code for FF#C0C0C0 and the gray color, with #ECE9D8 for IE.
