| Revision as of 22:53, 19 November 2006 edit65.188.198.250 (talk) →Simple Table← Previous edit | Revision as of 17:41, 20 November 2006 edit undoAzaToth (talk | contribs)Edit filter managers, Administrators23,226 edits afdNext edit → | ||
| Line 1: | Line 1: | ||
| <!-- Please do not remove or change this AfD message until the issue is settled -->{{#ifeq:{{FULLPAGENAME}}|Special:Undelete| |{{#if:{{{nosubst|}}}|<div style="display:none;">}} {{#ifeq:{{NAMESPACE}}||{{#switch:{{NAMESPACE}}|= |#default={{error:wrong namespace}}<div style="display:none;">}}|{{error:not substituted|AFD}}<div style="display:none;">}}}} {{#if:{{{nosubst|}}}|</div></div>}} | |||
| <div class="boilerplate metadata" id="afd" style="margin: 0 5%; padding: 0 7px 0px 7px; background: #EDF1F1; border: 1px solid #999999; text-align: left; font-size:95%;"> | |||
| '''This article is being considered for deletion in accordance with Misplaced Pages's ]]'''<br /> | |||
| Please share your thoughts on the matter at ''']''' on the Articles for deletion page.<br /> | |||
| Feel free to edit the article, but the article must not be blanked, and this notice must not be removed, until the discussion is closed. For more information, particularly on merging or moving the article during the discussion, read the ].<br/> | |||
| ---- | |||
| <small>'']: <nowiki>{{</nowiki>subst:afd}} • ''OR'' <nowiki>{{</nowiki>subst:afd2|pg={{PAGENAME}}|cat=|text=}} • <nowiki>{{</nowiki>subst:afd3|pg={{PAGENAME}}}} | |||
| </small></div> | |||
| {{#ifeq:{{NAMESPACE}}||{{#switch:{{NAMESPACE}}|= |#default=</div>}}|</div>}} | |||
| {{{category|]}}} | |||
| <!-- End of AfD message, feel free to edit beyond this point --> | |||
| {{cleanup|October 2006}} | {{cleanup|October 2006}} | ||
| ] | ] | ||
Revision as of 17:41, 20 November 2006
This article is being considered for deletion in accordance with Misplaced Pages's deletion policy.
Please share your thoughts on the matter at this article's entry on the Articles for deletion page.
Feel free to edit the article, but the article must not be blanked, and this notice must not be removed, until the discussion is closed. For more information, particularly on merging or moving the article during the discussion, read the guide to deletion.
Steps to list an article for deletion: {{subst:afd}} • Preloaded debate OR {{subst:afd2|pg=Table (HTML)|cat=|text=}} • {{subst:afd3|pg=Table (HTML)}} log
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.
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.
<td>…</td>
- td { display: table-cell }
- Creates a table data cell within a row.
| HTML |
|---|
| Comparisons |
TABLE
HTML table : <table> ... </table>
HTML table : <table params> ... </table>
CSS : TABLE { display: table }
TABLE tag can have the following parameters (params): border, frame, rules, width, cellspacing, cellpadding, bgcolor, v-space, h-space, bordercolor, datapagesize, datasrc, clear, noflow, colspec, units, dp, background, summary, align, style, lang, dir, title, id, class.
CSS ( border-collapse: collapse | separate | inherit ; ).
CSS ( empty-cells: show | hide | inherit ; ).
CSS ( border-style: double | solid | dashed | dotted |
- ridge | outset | groove | inset | hidden | none ; ).
CSS ( table-layout : auto | fixed | inherit ; ).
HTML ( border = pixels ).
CSS ( border-width: multi-length ; ) (pixels).
- (border-top-width, border-right-width, border-bottom-width, border-left-width).
HTML ( width = multi-length ).
- (standard pixel, percentage, relative values, "0*"(zero asterisk)) ).
HTML ( rules = none | groups | rows | cols | all ).
HTML ( frame = void|above|below|hsides|lhs|rhs|vsides|box|border ).
HTML ( align=left|center|right ) (Deprecated, Use CSS).
HTML ( cellspacing = length ).
CSS ( border-spacing: multi-length | horizontal_length vertical_length; ).
HTML ( cellpadding = length ).
CSS ( padding: multi-length; ).
HTML ( dir ).
CSS ( direction: ltr | rtl ; ).
CSS ( unicode-bidi: normal | embed | bidi-override ; ).
HTML ( bordercolor = "#rrggbb" | "colorname" ).
- (Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow, White). For more, see Web colors.
CSS ( border-color: "#rrggbb" | "colorname"; ).
- (border-top-color, border-right-color, border-bottom-color, border-left-color).
CSS ( margin: multi-length; ).
CSS ( visibility: visible | hidden | collapse | inherit ; ).
CSS ( display: inline | block | list-item | run-in | inline-block |
- table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | marker | compact | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container ; ).
Simple Table
|
A simple table is displayed (at right side), using HTML code: |
|
HTML code:
|
<table border="1"> |
Wiki code:
|
{| border="1" |
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. |
| ||||||||||
HTML code:
|
<table> |
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.
Wiki code:
|
{| border="1" |
COLGROUP, COL
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.
HTML code:
|
<table border="3" cellspacing="0" cellpadding="2" cols="5" |
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.
HTML code:
|
<table border="3" cellspacing="0" cellpadding="2" |
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.
HTML code:
|
<table border="3" cellspacing="0" cellpadding="2" rules="all" style="text-align: center; font-size: 85%; border-collapse: collapse; padding: 2px; border: 3px solid;"> |
Column and Row groups in Wiki markup processor
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.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
To display the above table with similar border width appearance in most HTML web browsers, below codes can be used.
Wiki code:
|
{| border="3" cellspacing="0" cellpadding="2" style="text-align: center; font-size: 85%; border-collapse: collapse; padding: 2px; border: 3px solid;" |
TR
Table row.
HTML : <tr> ... </tr>
CSS : TR { display: table-row }
This tag can have following parameters: bgcolor, align, char, charoff, valign, style, lang, dir, title, id, class.
HTML ( align = " left | center | right | justify | char " ).
CSS ( text-align: left | center | right ; ).
TH
Table Header Cell.
HTML : <th> ... </th>
CSS : TH { display: table-cell }
This tag can have following parameters: scope, width, height, abbr, axis, rowspan, colspan, bgcolor, nowrap, style, lang, dir, title, id, class. See TD.
TD
Table Data Cell.
HTML : <td> ... </td>
CSS : TD { display: table-cell }
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:
| |||||||||||||||||||||||||||||||
HTML code:
|
<table border="5" cellspacing="5" cellpadding="2"> |
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.
Wiki code:
|
{| border="5" cellspacing="5" cellpadding="2" style="border-color: #C0C0C0;" |
See also
- Table cell
- Windows Alt keycodes (List of HTML decimal or hexadecimal code on characters)
External links
HTML Table Tutorials at:
Categories: