Content deleted Content added
re-adding User Al Hart's few corrections/additions |
correction : changing big table structure, into a smaller tables, for easier editing |
||
Line 94:
<tr> <td> Data Cell: Row2 Column1 </td><td> Data Cell: Row2 Column2 </td> </tr>
<tr> <td> Data Cell: Row3 Column1 </td><td> Data Cell: Row3 Column2 </td> </tr>
</table
|
HTML code''':'''
{| border="0"
| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" |
<tt>
<table> <br />
Line 112 ⟶ 113:
</table>
</tt>
|
Wiki code''':'''
{| border="0"
|
<tt>
{| border="1" <br />
Line 127 ⟶ 128:
|}
</tt>
|}
'''Note:''' To display | (pipe symbol), < (less than sign), ! (exclamation mark), { (beginning second/curly bracket) in wiki table, you should use following HTML decimal or entity codes: '''|''' (&#124;), '''<''' (&#60; or &lt;), '''!''' (&#33;), '''{''' (&#123;), '''}''' (&#125;). For more, see [[Windows Alt keycodes]].
Line 157 ⟶ 156:
<tr> <td> Data-1a </td> <td> Data-2x </td> </tr>
<tr> <td> Data-1b </td> <td> Data-2y </td> </tr>
</table>
|
HTML code''':'''
{| border="0"
| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" |
<tt>
<table> <br />
Line 176:
</table>
</tt>
|
Wiki code''':'''
{| border="0"
|
<tt>
{| border="1" <br />
Line 258:
==== 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.
{|
| colspan="1" width="10%"|
| colspan="5" |
[[Image:Table-sample-collapse-colgroup-col-border-01.png]]
|
To display the above table ([[Number Forms|Unicode Number Forms Character List]]) with similar border width appearance in the [[Mozilla Firefox|Firefox (FF)]], [[Internet Explorer|Internet Explorer (IE)]], etc web browsers, which uses different [[Layout engine|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''':'''
{| border="0"
|
<tt>
<table border="3" cellspacing="0" cellpadding="2" cols="5" <br />
Line 394 ⟶ 393:
==== Column and Row groups with CSS border width supported browsers ====
Below table's appearance was rendered by the [[Gecko (layout engine)|Gecko]] (/[[Mozilla]] /[[Mozilla Firefox|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 (layout engine)|Trident]] (/MSHTML /[[Internet Explorer|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.
{|
| colspan="1" width="10%"|
| colspan="5" |
[[Image:Table-sample-collapse-colgroup-col-border-02.png]]
|
To display the above table with similar border width appearance in the [[Firefox|FF]] web browsers, below codes are required.
HTML code''':'''
{| border="0"
|
<tt>
<table border="3" cellspacing="0" cellpadding="2" <br />
Line 493 ⟶ 491:
==== Column and Row groups with CSS border width non-supported browsers ====
[[Internet Explorer|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.
{|
| colspan="1" width="10%"|
| colspan="5" |
[[Image:Table-sample-collapse-border-css-01.png]]
|
To display the above table with similar border width appearance in the [[Internet Explorer|IE]] (and other) web browsers, below codes can be used.
HTML code''':'''
{| border="0"
|
<tt>
<table border="3" cellspacing="0" cellpadding="2" rules="all" style="text-align: center; font-size: 85%; border-collapse: collapse; padding: 2px; border: 3px solid;"> <br />
Line 605 ⟶ 603:
==== 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.
{|
| colspan="1" width="10%"|
| colspan="5" |
{| border="3" cellspacing="0" cellpadding="2" style="text-align: center; font-size: 85%; border-collapse: collapse; padding: 2px; border: 3px solid;"
Line 677 ⟶ 675:
! style="border: 3px solid;" |
|}
|
To display the above table with similar border width appearance in most HTML web browsers, below codes can be used.
Wiki code''':'''
{| border="0"
|
<tt>
{| border="3" cellspacing="0" cellpadding="2" style="text-align: center; font-size: 85%; border-collapse: collapse; padding: 2px; border: 3px solid;" <br />
Line 801 ⟶ 799:
===Rowspan, Colspan===
Another simple HTML table is displayed below, applying the ''rowspan'' and ''colspan'' parameters''':'''
{|
| colspan="1" width="10%"|
| colspan="5" |
<table border="5" cellspacing="5" cellpadding="2">
Line 835 ⟶ 833:
<tr>
<th colspan="4"> Purchased Equipments (June, 2006) </th> </tr>
</table
|
HTML code''':'''
{| border="0"
| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" |
<tt>
<table border="5" cellspacing="5" cellpadding="2"> <br />
Line 872 ⟶ 871:
</table>
</tt>
|
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 [[Firefox|FF]] ''#C0C0C0'' and the ''gray'' color, with ''#ECE9D8'' for [[Internet Explorer|IE]].
Wiki code''':'''
{| border="0"
|
<tt>
{| border="5" cellspacing="5" cellpadding="2" style="border-color: #C0C0C0;" <br />
| |||