Table (HTML): Difference between revisions

Browse history interactively ← Previous editContent deleted Content addedVisual WikitextInline

Revision as of 22:53, 19 November 2006 edit65.188.198.250 (talk) →Simple Table ← Previous edit		Latest revision as of 00:07, 7 April 2014 edit undoSoledadKabocha (talk \| contribs)Extended confirmed users14,258 editsm r to section
(6 intermediate revisions by 4 users not shown)
Line 1:		Line 1:
			#REDIRECT ]
	{{cleanup\|October 2006}}
	]

			{{r to section}}


	'''Table''' is a ] tag for creating boxes on web pages and to display data in those boxes.

	;{{XMLElement\|table\|Table\|…}}
	<span style="color: green;">'''table { display: table }'''</span>
	:Creates a table

	;{{XMLElement\|caption\|Table Caption\|…}}
	<span style="color: green;">'''caption { display: table-caption }'''</span>
	:Specifies a caption for the entire table.

	;{{XMLElement\|colgroup\|Column Group\|…}}
	<span style="color: green;">'''colgroup { display: table-column-group }'''</span>
	:Specifies a column group in a table.

	:;{{XMLElement\|col\|Column Attributes\|\|end=no}}
	:<span style="color: green;">'''col { display: table-column }'''</span>
	::Specifies attributes for an entire column in a table.

	;{{XMLElement\|thead\|Table Head\|…}}
	<span style="color: green;">'''thead { display: table-header-group }'''</span>
	: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).

	;{{XMLElement\|tfoot\|Table Foot\|…}}
	<span style="color: green;">'''tfoot { display: table-footer-group }'''</span>
	:Specifies the footer part of a table. Like <code><thead></code>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media)

	;{{XMLElement\|tbody\|Table Body\|…}}
	<span style="color: green;">'''tbody { display: table-row-group }'''</span>
	:Specifies the main part of a table.

	;{{XMLElement\|tr\|Table Row\|…}}
	<span style="color: green;">'''tr { display: table-row }'''</span>
	:Creates a row in the table.

	:;{{XMLElement\|th\|Table Header Cell\|…}}
	:<span style="color: green;">'''th { display: table-cell }'''</span>
	::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.

	:;{{XMLElement\|td\|Table Data Cell\|…}}
	:<span style="color: green;">'''td { display: table-cell }'''</span>
	::Creates a table data cell within a row.

	{{Html series}}


	==TABLE==

	HTML table : <tt> <table> ... </table> </tt> <br />
	HTML table : <tt> <table ''params''> ... </table> </tt>

	CSS : <tt> TABLE { display: table } </tt>

	''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 ( <tt> border-collapse: collapse \| separate \| inherit ; </tt> ). <br />
	CSS ( <tt> empty-cells: show \| hide \| inherit ; </tt> ). <br />
	CSS ( <tt> border-style: double \| solid \| dashed \| dotted \| </tt>
	:<tt>ridge \| outset \| groove \| inset \| hidden \| none ; </tt> ). <br />
	CSS ( <tt> table-layout : auto \| fixed \| inherit ; </tt> ). <br />
	HTML ( <tt> border = pixels </tt> ). <br />
	CSS ( <tt> border-width: multi-length ; </tt> ) (pixels).
	:(border-top-width, border-right-width, border-bottom-width, border-left-width). <br />
	HTML ( <tt> width = multi-length ).
	:(standard pixel, percentage, relative values, "0*"(zero asterisk)) </tt> ). <br />
	HTML ( <tt> rules = none \| groups \| rows \| cols \| all </tt> ). <br />
	HTML ( <tt> frame = void\|above\|below\|hsides\|lhs\|rhs\|vsides\|box\|border </tt> ). <br />
	HTML ( <tt> align=left\|center\|right </tt> ) (Deprecated, Use CSS). <br />
	HTML ( <tt> cellspacing = length </tt> ). <br />
	CSS ( <tt> border-spacing: multi-length \| horizontal_length vertical_length; </tt> ). <br />
	HTML ( <tt> cellpadding = length </tt> ). <br />
	CSS ( <tt> padding: multi-length; </tt> ). <br />
	HTML ( <tt> dir </tt> ). <br />
	CSS ( <tt> direction: ltr \| rtl ; </tt> ). <br />
	CSS ( <tt> unicode-bidi: normal \| embed \| bidi-override ; </tt> ). <br />
	HTML ( <tt> bordercolor = "#rrggbb" \| "colorname" </tt> ).
	:(Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow, White). For more, see ]. <br />
	CSS ( <tt> border-color: "#rrggbb" \| "colorname"; </tt> ).
	:(border-top-color, border-right-color, border-bottom-color, border-left-color). <br />
	CSS ( <tt> margin: multi-length; </tt> ). <br />
	CSS ( <tt> visibility: visible \| hidden \| collapse \| inherit ; </tt> ). <br />
	CSS ( <tt> display: inline \| block \| list-item \| run-in \| inline-block \| </tt>
	:<tt>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 ; </tt>).


	===Simple Table===
	{\| border="0" width="100%"
	\| width="33%" \|
	A simple table is displayed (at right side), using HTML code''':'''
	\|
	<table border="1">
	<tr> <th> Header Cell: Column 1 </th><th> Header Cell: Column 2 </th> </tr>
	<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 border="1"> <br />
	<tr> <br />
	<th> Header Cell: Column 1 </th> <th> Header Cell: Column 2 </th> <br />
	</tr> <br />
	<tr> <br />
	<td> Data Cell: Row2 Column1 </td> <td> Data Cell: Row2 Column2 </td> <br />
	</tr> <br />
	<tr> <br />
	<td> Data Cell: Row3 Column1 </td> <td> Data Cell: Row3 Column1 </td> <br />
	</tr> <br />
	</table>
	</tt>
	\|}


	Wiki code''':'''
	{\| border="0"
	\| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" \|
	<tt>
	{\| border="1" <br />
	'''!''' Header Cell: Column 1 '''!!''' Header Cell: Column 2 <br />
	\|- <br />
	\| Data Cell: Row2 Column1 \|\| Data Cell: Row2 Column1 <br />
	\|- <br />
	\| Data Cell: Row3 Column1 \|\| Data Cell: Row3 Column1 <br />
	\|}
	</tt>
	\|}


	Below Table is displayed by using Wiki-markup code''':'''

	{\| 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
	\|}

	:'''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: <tt>'''&#124;'''</tt> for '''\|''' symbol, <tt>&#60;</tt> or <tt>&lt;</tt> for '''<''' symbol, <tt>&#33;</tt> for '''!''' symbol, <tt>&#123;</tt> for '''{''' symbol, <tt>&#125;</tt> for '''}''' symbol. For more, see http://en.wikipedia.org/Windows_Alt_keycodes.

	==CAPTION==
	Table caption is a title of the table.

	HTML : <tt> <nowiki> <caption> ... </caption> </nowiki> </tt> <br />
	HTML : <tt> <caption ''params''> ... </caption> </tt>

	CSS : <tt> CAPTION { display: table-caption } </tt>

	''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 : ( <tt> align = "top \| bottom \| left \| right" </tt> ). <br />
	CSS : ( <tt> caption-side: top \| bottom \| left \| right \| inherit ; </tt> ).

	By default, caption uses ''align="top"''.

	{\| border="0" width="100%"
	\| colspan="3" width="50%" \|
	In the rightside table, the texts "'''Caption at bottom'''" are displaying a bottom side caption.
	\| colspan="3" \|
	<table border="1">
	<caption align="bottom" style="caption-side: bottom"> <b> Caption at bottom </b> </caption>
	<tr> <th> Data-Type-1 </th> <th> Data-Type-2 </th> </tr>
	<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 />
	<'''caption''' align="bottom" style="caption-side: bottom"> <b> Caption at bottom </b> </caption> <br />
	<tr> <br />
	<th> Data-Type-1 </th> <th> Data-Type-2 </th> <br />
	</tr> <br />
	<tr> <br />
	<td> Data-1a </td> <td> Data-2x </td> <br />
	</tr> <br />
	<tr> <br />
	<td> Data-1b </td> <td> Data-2y </td> <br />
	</tr> <br />
	</table>
	</tt>
	\|}
	Note: ''caption'' is using both HTML and stylesheet parameter. HTML parameter (align) is included for compatibility with ] (~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="0"
	\| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" \|
	<tt>
	{\| border="1" <br />
	'''\|+''' align="bottom" style="caption-side: bottom" \| '''Caption at bottom''' <br />
	! Data-Type-1 !! Data-Type-2 <br />
	\|- <br />
	\| Data-1a \|\| Data-2x <br />
	\|- <br />
	\| Data-1b \|\| Data-2y <br />
	\|}
	</tt>
	\|}


	==COLGROUP, COL==
	Table column groups and columns : colgroup, col, colgroup col.

	HTML : <tt> <colgroup> ... </colgroup> </tt> <br />
	CSS : <tt> COLGROUP { display: table-column-group } </tt> <br />
	HTML : <tt> <colgroup ''params''> ... </colgroup> </tt>

	HTML : <tt> <col> </tt> <br />
	CSS : <tt> COL { display: table-column } </tt> <br />
	HTML : <tt> <col ''params''> </tt>

	HTML : <tt> <col /> </tt> <br />
	HTML : <tt> <col ''params'' /> </tt>

	HTML : <tt> <colgroup> <col /> ... </colgroup> </tt> <br />
	HTML : <tt> <colgroup ''params''> <col ''params'' /> ... </colgroup> </tt>

	''colgroup'' & ''col'' can have following parameters (''params''): span, width, align, char, charoff, valign, style, lang, dir, title, id, class.

	HTML ( span = column_numbers ). <br />
	HTML ( align = " left \| center \| right \| justify \| char " ). <br />

	See TBODY for examples.


	==THEAD==
	See TBODY.


	==TFOOT==
	See TBODY.


	==TBODY==
	Table rowgroups : thead, tfoot, tbody.

	HTML : <tt> <thead> ... </thead> </tt>

	HTML : <tt> <tfoot> ... </tfoot> </tt>

	HTML : <tt> <tbody> ... </tbody> </tt>

	CSS : <tt> THEAD { display: table-header-group } </tt>

	CSS : <tt> TFOOT { display: table-footer-group } </tt>

	CSS : <tt> TBODY { display: table-row-group } </tt>

	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 ( <tt> align = " left \| center \| right \| justify \| char " </tt> ). <br />
	CSS ( <tt> text-align: left \| right \| center ; </tt> ). <br />
	HTML ( <tt> valign = " top \| middle \| bottom \| baseline " </tt> ). <br />
	CSS ( <tt> vertical-align: top \| middle \| bottom \| baseline ; </tt> ). <br />
	HTML ( <tt> char = character </tt> ). <br />
	HTML ( <tt> charoff = length </tt> ). <br />


	=== 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.

	{\| border="0" width="100%"
	\| colspan="1" width="10%"\|
	\| colspan="5" \|
	]
	\|}

	To display the above table (]) with similar border width appearance in the ], ], etc web browsers, which uses different ], 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"
	\| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" \|
	<tt>
	<table border="3" cellspacing="0" cellpadding="2" cols="5" <br />
	rules="all" style="text-align: center; font-size: 85%; border-spacing: 0px; <br />
	border-collapse: collapse; padding: 2px; border: 3px solid;"> <br />
	<br />
	<'''colgroup''' align="center" style="border: 3px solid; padding: 2px;"> <br />
	<col width="0*" style="border-left: 3px solid; <br />
	border-right: 1px solid; padding: 2px;" /> <br />
	<col style="border-left: 1px solid; <br />
	border-right: 3px solid; padding: 2px;" /> <br />
	</colgroup> <br />
	<colgroup align="center" style="border: 3px solid; padding: 2px;"> <br />
	<col width="0*" style="border-left: 3px solid; <br />
	border-right: 1px solid; padding: 2px;" /> <br />
	<col style="border-left: 1px solid; <br />
	border-right: 3px solid; padding: 2px;" /> <br />
	</colgroup> <br />
	<'''col''' align="center" width="0*" style="border: 3px solid; padding: 2px;" /> <br />
	<br />
	<caption> <b> Unicode (ISO 10646) Character List - "Number Forms" Block (Partial) </b> </caption> <br />
	<br />
	<'''thead''' style="border: 3px solid;"> <br />
	<tr> <br />
	<th colspan="2" scope="colgroup" style="border: 3px solid;"> 2150 </th> <br />
	<th colspan="2" scope="colgroup" style="border: 3px solid;"> 2160 </th> <br />
	<th scope="col" style="border: 3px solid;"> &nbsp; </th> <br />
	</tr> <br />
	</thead> <br />
	<br />
	<thead style="border: 3px solid;"> <br />
	<tr> <br />
	<th scope="col"> <small> Symbol </small> </th> <br />
	<th rowspan="2" scope="col" style="border-right: 3px solid;"> Name </th> <br />
	<th scope="col"> <small> Symbol </small> </th> <br />
	<th rowspan="2" scope="col" style="border-right: 3px solid;"> Name </th> <br />
	<th rowspan="3" scope="col" style="border: 3px solid;"> <br />
	<small><small> Last Hex# </small></small> </th> <br />
	</tr> <br />
	<tr> <th> Hex </th> <th> Hex </th> </tr> <br />
	<tr> <br />
	<th colspan="2" style="border-bottom: 3px solid; <br />
	border-right: 3px solid;"> <br />
	<small> Symbol's Picture </small> </th> <br />
	<th colspan="2" style="border-bottom: 3px solid; <br />
	border-right: 3px solid;"> <br />
	<small> Symbol's Picture </small> </th> <br />
	</tr> <br />
	</thead> <br />
	<br />
	<'''tfoot''' style="border: 3px solid;"> <br />
	<tr> <br />
	<th> <small> Symbol </small> </th> <br />
	<th rowspan="2" style="border-right: 3px solid;"> Name </th> <br />
	<th> <small> Symbol </small> </th> <br />
	<th rowspan="2" style="border-right: 3px solid;"> Name </th> <br />
	<th rowspan="3" style="border: 3px solid;"> <br />
	<small><small> Last Hex# </small></small> </th> <br />
	</tr> <br />
	<tr> <th> Hex </th> <th> Hex </th> </tr> <br />
	<tr> <br />
	<th colspan="2" style="border-bottom: 3px solid; <br />
	border-right: 3px solid;"> <br />
	<small> Symbol's Picture </small> </th> <br />
	<th colspan="2" style="border-bottom: 3px solid; <br />
	border-right: 3px solid;"> <br />
	<small> Symbol's Picture </small> </th> <br />
	</tr> <br />
	<tr> <br />
	<th colspan="2" style="border: 3px solid;"> 2150 </th> <br />
	<th colspan="2" style="border: 3px solid;"> 2160 </th> <br />
	<th style="border: 3px solid;"&nbsp; </th> <br />
	</tr> <br />
	</tfoot> <br />
	<br />
	<'''tbody''' style="border: 3px solid; border-width: 3px;"> <br />
	<tr> <br />
	<td scope="row" style="font-size:200%;"> &#x215E; </td> <br />
	<td rowspan="2" style="border-right: 3px solid;"> <br />
	Vulger Fraction Seven Eighths </td> <br />
	<td style="font-size:200%;"> &#x216E; </td> <br />
	<td rowspan="2" style="border-right: 3px solid;"> <br />
	Roman Numeral Five Hundred </td> <br />
	<td rowspan="3" style="border: 3px solid;"> <b> E </b> </td> <br />
	</tr> <br />
	<tr> <td> 0x215E </td> <td> 0x216E </td> </tr> <br />
	<tr> <br />
	<td colspan="2" style="border-bottom: 3px solid; <br />
	border-right: 3px solid;"> <br />
	<img src="U+215E.gif" /> </td> <br />
	<td colspan="2" style="border-bottom: 3px solid; <br />
	border-right: 3px solid;"> <br />
	<img src="U+216E.gif" /> </td> <br />
	</tr> <br />
	</tbody> <br />
	<br />
	<tbody style="border: 3px solid;"> <br />
	<tr> <br />
	<td scope="row" style="font-size:200%;"> &#x215F; </td> <br />
	<td rowspan="2" style="border-right: 3px solid;"> <br />
	Fraction Numerator One </td> <br />
	<td style="font-size:200%;"> &#x216F; </td> <br />
	<td rowspan="2" style="border-right: 3px solid;"> <br />
	Roman Numeral One Thousand </td> <br />
	<td rowspan="3" style="border: 3px solid;"> <b> F </b> </td> <br />
	</tr> <br />
	<tr> <td> 0x215F </td> <td> 0x216F </td> </tr> <br />
	<tr> <br />
	<td colspan="2" style="border-bottom: 3px solid; <br />
	border-right: 3px solid;"> <br />
	<img src="U+215F.gif" /> </td> <br />
	<td colspan="2" style="border-bottom: 3px solid; <br />
	border-right: 3px solid;"> <br />
	<img src="U+216F.gif" /> </td> <br />
	</tr> <br />
	</tbody> <br />
	<br />
	</table>
	</tt>
	\|}


	==== Column and Row groups with CSS border width supported browsers ====
	Below table's appearance was rendered by the ] (/] /]) 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 ] (/MSHTML /] 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.

	{\| border="0" width="100%"
	\| colspan="1" width="10%"\|
	\| colspan="5" \|
	]
	\|}

	To display the above table with similar border width appearance in the ] web browsers, below codes are required.

	HTML code''':'''
	{\| border="0"
	\| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" \|
	<tt>
	<table border="3" cellspacing="0" cellpadding="2" <br />
	rules="all" style="text-align: center; font-size: 85%; <br />
	border-collapse: collapse; padding: 2px; border: 3px solid;"> <br />
	<br />
	<colgroup align="center" style="border: 3px solid; padding: 2px;"> <br />
	<col /> <col /> <br />
	</colgroup> <br />
	<colgroup align="center" style="border: 3px solid; padding: 2px;"> <br />
	<col /> <col /> <br />
	</colgroup> <br />
	<col align="center" style="border: 3px solid; padding: 2px;" /> <br />
	<br />
	<caption> <b> Unicode (ISO 10646) Number Forms Character List (Partial 02) </b> </caption> <br />
	<br />
	<thead style="border: 3px solid;"> <br />
	<tr> <br />
	<th colspan="2"> 2150 </th> <th colspan="2"> 2160 </th> <th> &nbsp; </th> <br />
	</tr> <br />
	</thead> <br />
	<br />
	<thead style="border: 3px solid;"> <br />
	<tr> <br />
	<th> <small> Symbol </small> </th> <th rowspan="2"> Name </th> <br />
	<th> <small> Symbol </small> </th> <th rowspan="2"> Name </th> <br />
	<th rowspan="3"> <small><small> Last Hex# </small></small> </th> <br />
	</tr> <br />
	<tr> <th> Hex </th> <th> Hex </th> </tr> <br />
	<tr> <br />
	<th colspan="2"> <small> Symbol's Picture </small> </th> <br />
	<th colspan="2"> <small> Symbol's Picture </small> </th> <br />
	</tr> <br />
	</thead> <br />
	<br />
	<tfoot style="border: 3px solid;"> <br />
	<tr> <br />
	<th> <small> Symbol </small> </th> <th rowspan="2"> Name </th> <br />
	<th> <small> Symbol </small> </th> <th rowspan="2"> Name </th> <br />
	<th rowspan="3"> <small><small> Last Hex# </small></small> </th> <br />
	</tr> <br />
	<tr> <th> Hex </th> <th> Hex </th> </tr> <br />
	<tr> <br />
	<th colspan="2"> <small> Symbol's Picture </small> </th> <br />
	<th colspan="2"> <small> Symbol's Picture </small> </th> <br />
	</tr> <br />
	<tr> <br />
	<th colspan="2"> 2150 </th> <th colspan="2"> 2160 </th> <th> &nbsp; </th> <br />
	</tr> <br />
	</tfoot> <br />
	<br />
	<tbody style="border: 3px solid; border-width: 3px;"> <br />
	<tr> <br />
	<td style="font-size:200%;"> &#x215E; </td> <br />
	<td rowspan="2"> Vulger Fraction Seven Eighths </td> <br />
	<td style="font-size:200%;"> &#x216E; </td> <br />
	<td rowspan="2"> Roman Numeral Five Hundred </td> <br />
	<td rowspan="3"> <b> E </b> </td> <br />
	</tr> <br />
	<tr> <td> 0x215E </td> <td> 0x216E </td> </tr> <br />
	<tr> <br />
	<td colspan="2"> <img src="U+215E.gif" /> </td> <br />
	<td colspan="2"> <img src="U+216E.gif" /> </td> <br />
	</tr> <br />
	</tbody> <br />
	<br />
	<tbody style="border: 3px solid;"> <br />
	<tr> <br />
	<td style="font-size:200%;"> &#x215F; </td> <br />
	<td rowspan="2"> Fraction Numerator One </td> <br />
	<td style="font-size:200%;"> &#x216F; </td> <br />
	<td rowspan="2"> Roman Numeral One Thousand </td> <br />
	<td rowspan="3"> <b> F </b> </td> <br />
	</tr> <br />
	<tr> <td> 0x215F </td> <td> 0x216F </td> </tr> <br />
	<tr> <br />
	<td colspan="2"> <img src="U+215F.gif" /> </td> <br />
	<td colspan="2"> <img src="U+216F.gif" /> </td> <br />
	</tr> <br />
	</tbody> <br />
	<br />
	</table>
	</tt>
	\|}

	==== Column and Row groups with CSS border width non-supported browsers ====

	] (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.

	{\| border="0" width="100%"
	\| colspan="1" width="10%"\|
	\| colspan="5" \|
	]
	\|}

	To display the above table with similar border width appearance in the ] (and other) web browsers, below codes can be used.

	HTML code''':'''
	{\| border="0"
	\| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" \|
	<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 />
	<br />
	<caption> <b> Unicode (ISO 10646) Number Forms Character List (Partial 03) </b> </caption> <br />
	<br />
	<thead> <br />
	<tr> <br />
	<th colspan="2" style="border: 3px solid;"> 2150 </th> <br />
	<th colspan="2" style="border: 3px solid;"> 2160 </th> <br />
	<th style="border: 3px solid;">   </th> <br />
	</tr> <br />
	</thead> <br />
	<br />
	<thead> <br />
	<tr> <br />
	<th> <small> Symbol </small> </th> <br />
	<th rowspan="2" style="border-right: 3px solid;"> Name </th> <br />
	<th> <small> Symbol </small> </th> <br />
	<th rowspan="2" style="border-right: 3px solid;"> Name </th> <br />
	<th rowspan="3" style="border: 3px solid;"> <br />
	<small><small> Last Hex# </small></small> </th> <br />
	</tr> <br />
	<tr> <th> Hex </th> <th> Hex </th> </tr> <br />
	<tr> <br />
	<th colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;"> <br />
	<small> Symbol's Picture </small> </th> <br />
	<th colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;"> <br />
	<small> Symbol's Picture </small> </th> <br />
	</tr> <br />
	</thead> <br />
	<br />
	<tfoot> <br />
	<tr> <br />
	<th> <small> Symbol </small> </th> <br />
	<th rowspan="2" style="border-right: 3px solid;"> Name </th> <br />
	<th> <small> Symbol </small> </th> <br />
	<th rowspan="2" style="border-right: 3px solid;"> Name </th> <br />
	<th rowspan="3" style="border: 3px solid;"> <br />
	<small><small> Last Hex# </small></small> </th> <br />
	</tr> <br />
	<tr> <th> Hex </th> <th> Hex </th> </tr> <br />
	<tr> <br />
	<th colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;"> <br />
	<small> Symbol's Picture </small> </th> <br />
	<th colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;"> <br />
	<small> Symbol's Picture </small> </th> <br />
	</tr> <br />
	<tr> <br />
	<th colspan="2" style="border: 3px solid;"> 2150 </th> <br />
	<th colspan="2" style="border: 3px solid;"> 2160 </th> <br />
	<th style="border: 3px solid;">   </th> <br />
	</tr> <br />
	</tfoot> <br />
	<br />
	<tbody> <br />
	<tr> <br />
	<td style="font-size:200%;"> &#x215E; </td> <br />
	<td rowspan="2" style="border-right: 3px solid;"> <br />
	Vulger Fraction Seven Eighths </td> <br />
	<td style="font-size:200%;"> &#x216E; </td> <br />
	<td rowspan="2" style="border-right: 3px solid;"> <br />
	Roman Numeral Five Hundred </td> <br />
	<td rowspan="3" style="border: 3px solid;"> <b> E </b> </td> <br />
	</tr> <br />
	<tr> <td> 0x215E </td> <td> 0x216E </td> </tr> <br />
	<tr> <br />
	<td colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;"> <br />
	<img src="U+215E.gif" /> </td> <br />
	<td colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;"> <br />
	<img src="U+216E.gif" /> </td> <br />
	</tr> <br />
	</tbody> <br />
	<br />
	<tbody> <br />
	<tr> <br />
	<td style="font-size:200%;"> &#x215F; </td> <br />
	<td rowspan="2" style="border-right: 3px solid;"> <br />
	Fraction Numerator One </td> <br />
	<td style="font-size:200%;"> &#x216F; </td> <br />
	<td rowspan="2" style="border-right: 3px solid;"> <br />
	Roman Numeral One Thousand </td> <br />
	<td rowspan="3" style="border: 3px solid;"> <b> F </b> </td> <br />
	</tr> <br />
	<tr> <td> 0x215F </td> <td> 0x216F </td> </tr> <br />
	<tr> <br />
	<td colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;"> <br />
	<img src="U+215F.gif" /> </td> <br />
	<td colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;"> <br />
	<img src="U+216F.gif" /> </td> <br />
	</tr> <br />
	</tbody> <br />
	<br />
	</table>
	</tt>
	\|}


	==== 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.

	{\| border="0" width="100%"
	\| 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;"
	\|+ ''' Unicode (ISO 10646) Number Forms Character List (Partial 03) '''
	! colspan="2" style="border: 3px solid;" \| 2150
	! colspan="2" style="border: 3px solid;" \| 2160
	! style="border: 3px solid;" \|
	\|-
	! <small> Symbol </small>
	! rowspan="2" style="border-right: 3px solid;" \| Name
	! <small> Symbol </small>
	! rowspan="2" style="border-right: 3px solid;" \| Name
	! rowspan="3" style="border: 3px solid;" \| <small><small> Last Hex# </small></small>
	\|-
	! Hex !! Hex
	\|-
	! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \|
	<small> Symbol's Picture </small>
	! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \|
	<small> Symbol's Picture </small>
	\|-
	\| style="font-size:200%;" \| ⅞
	\| rowspan="2" style="border-right: 3px solid;" \|
	Vulger Fraction Seven Eighths
	\| style="font-size:200%;" \| Ⅾ
	\| rowspan="2" style="border-right: 3px solid;" \|
	Roman Numeral Five Hundred
	\| rowspan="3" style="border: 3px solid;" \| ''' E '''
	\|-
	\| 0x215E \|\| 0x216E
	\|-
	\| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \|
	]
	\| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \|
	]
	\|-
	\| style="font-size:200%;" \| ⅟
	\| rowspan="2" style="border-right: 3px solid;" \|
	Fraction Numerator One
	\| style="font-size:200%;" \| Ⅿ
	\| rowspan="2" style="border-right: 3px solid;" \|
	Roman Numeral One Thousand
	\| rowspan="3" style="border: 3px solid;" \| ''' F '''
	\|-
	\| 0x215F \|\| 0x216F
	\|-
	\| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \|
	]
	\| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \|
	]
	\|-
	! <small> Symbol </small>
	! rowspan="2" style="border-right: 3px solid;" \| Name
	! <small> Symbol </small>
	! rowspan="2" style="border-right: 3px solid;" \| Name
	! rowspan="3" style="border: 3px solid;" \| <small><small> Last Hex# </small></small>
	\|-
	! Hex !! Hex
	\|-
	! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \|
	<small> Symbol's Picture </small>
	! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \|
	<small> Symbol's Picture </small>
	\|-
	! colspan="2" style="border: 3px solid;" \| 2150
	! colspan="2" style="border: 3px solid;" \| 2160
	! 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"
	\| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" \|
	<tt>
	{\| border="3" cellspacing="0" cellpadding="2" style="text-align: center; font-size: 85%; border-collapse: collapse; padding: 2px; border: 3px solid;" <br />
	\|+ ''' Unicode (ISO 10646) Number Forms Character List (Partial 03) ''' <br />
	! colspan="2" style="border: 3px solid;" \| 2150 <br />
	! colspan="2" style="border: 3px solid;" \| 2160 <br />
	! style="border: 3px solid;" \| &nbsp; <br />
	\|- <br />
	! <small> Symbol </small> <br />
	! rowspan="2" style="border-right: 3px solid;" \| Name <br />
	! <small> Symbol </small> <br />
	! rowspan="2" style="border-right: 3px solid;" \| Name <br />
	! rowspan="3" style="border: 3px solid;" \| <br />
	<small><small> Last Hex# </small></small> <br />
	\|- <br />
	! Hex !! Hex <br />
	\|- <br />
	! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \| <br />
	<small> Symbol's Picture </small> <br />
	! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \| <br />
	<small> Symbol's Picture </small> <br />
	\|- <br />
	\| style="font-size:200%;" \| &#x215E; <br />
	\| rowspan="2" style="border-right: 3px solid;" \| <br />
	Vulger Fraction Seven Eighths <br />
	\| style="font-size:200%;" \| &#x216E; <br />
	\| rowspan="2" style="border-right: 3px solid;" \| <br />
	Roman Numeral Five Hundred <br />
	\| rowspan="3" style="border: 3px solid;" \| ''' E ''' <br />
	\|- <br />
	\| 0x215E \|\| 0x216E <br />
	\|- <br />
	\| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \| <br />
	[[Image:U+215E.gif]] <br />
	\| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \| <br />
	[[Image:U+216E.gif]] <br />
	\|- <br />
	\| style="font-size:200%;" \| &#x215F; <br />
	\| rowspan="2" style="border-right: 3px solid;" \| <br />
	Fraction Numerator One <br />
	\| style="font-size:200%;" \| &#x216F; <br />
	\| rowspan="2" style="border-right: 3px solid;" \| <br />
	Roman Numeral One Thousand <br />
	\| rowspan="3" style="border: 3px solid;" \| ''' F ''' <br />
	\|- <br />
	\| 0x215F \|\| 0x216F <br />
	\|- <br />
	\| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \| <br />
	[[Image:U+215F.gif]] <br />
	\| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \| <br />
	[[Image:U+216F.gif]] <br />
	\|- <br />
	! <small> Symbol </small> <br />
	! rowspan="2" style="border-right: 3px solid;" \| Name <br />
	! <small> Symbol </small> <br />
	! rowspan="2" style="border-right: 3px solid;" \| Name <br />
	! rowspan="3" style="border: 3px solid;" \| <br />
	<small><small> Last Hex# </small></small> <br />
	\|- <br />
	! Hex !! Hex <br />
	\|- <br />
	! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \| <br />
	<small> Symbol's Picture </small> <br />
	! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" \| <br />
	<small> Symbol's Picture </small> <br />
	\|- <br />
	! colspan="2" style="border: 3px solid;" \| 2150 <br />
	! colspan="2" style="border: 3px solid;" \| 2160 <br />
	! style="border: 3px solid;" \| &nbsp; <br />
	\|}
	</tt>
	\|}


	==TR==
	Table row.

	HTML : <tt> <tr> ... </tr> </tt> <br />
	CSS : <tt> TR { display: table-row } </tt>

	This tag can have following parameters: bgcolor, align, char, charoff, valign, style, lang, dir, title, id, class.

	HTML ( <tt> align = " left \| center \| right \| justify \| char " </tt> ). <br />
	CSS ( <tt> text-align: left \| center \| right ; </tt> ). <br />


	==TH==
	Table Header Cell.

	HTML : <tt> <th> ... </th> </tt> <br/>
	CSS : <tt> TH { display: table-cell } </tt>

	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 : <tt> <td> ... </td> </tt> <br/>
	CSS : <tt> TD { display: table-cell } </tt>

	This tag can have following parameters: headers, scope, width, height, abbr, axis, rowspan, colspan, bgcolor, nowrap, style, lang, dir, title, id, class.

	HTML ( <tt> headers = id_refs </tt> ). <br />
	HTML ( <tt> scope = row \| col \| rowgroup \| colgroup </tt> ). <br />
	HTML ( <tt> abbr = text </tt> ). <br />
	HTML ( <tt> axis = category_data_name(s list) </tt> ). <br />
	HTML ( <tt> rowspan = row_number(s) </tt> ). <br />
	HTML ( <tt> colspan = column_number(s) </tt> ). <br />
	HTML ( <tt> nowrap </tt> ) (Deprecated, Use CSS). <br />
	CSS ( <tt> white-space: normal \| pre \| nowrap ; </tt> ). <br />
	HTML ( <tt> width = length </tt> ) (Deprecated, Use CSS). <br />
	HTML ( <tt> height = length </tt> ) (Deprecated, Use CSS). <br />
	CSS ( <tt> height: length ; </tt> ). <br />


	===Rowspan, Colspan===

	Another simple HTML table is displayed below, applying the ''rowspan'' and ''colspan'' parameters''':'''

	{\| border="0" width="100%"
	\| colspan="1" width="10%"\|
	\| colspan="5" \|
	<table border="5" cellspacing="5" cellpadding="2">
	<tr> <th colspan="4"> Purchased Equipments (June, 2006) </th> </tr>
	<tr>
	<th rowspan="2"> Item Num# </th>
	<th rowspan="2"> Item Picture </th>
	<th> Item Description </th> <th> Price </th>
	</tr>
	<tr>
	<th> Shipping Handling, Installation, etc </th> <th> Expense </th>
	</tr>
	<tr>
	<td rowspan="2"> 1. </td>
	<td rowspan="2"> ] </td>
	<td> IBM Clone Computer. </td> <td> $ 400.00 </td>
	</tr>
	<tr>
	<td> Shipping Handling, Installation, etc </td> <td> $ 20.00 </td>
	</tr>
	<tr>
	<td rowspan="2"> 2. </td>
	<td rowspan="2"> ] </td>
	<td> 1GB RAM Module for Computer. </td> <td> $ 50.00 </td>
	</tr>
	<tr>
	<td> Shipping Handling, Installation, etc </td> <td> $ 14.00 </td>
	</tr>
	<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 />
	<tr> <th '''colspan'''="4"> Purchased Equipments (June, 2006) </th> </tr> <br />
	<tr> <br />
	<th '''rowspan'''="2"> Item Num# </th> <br />
	<th rowspan="2"> Item Picture </th> <br />
	<th> Item Description </th> <th> Price </th> <br />
	</tr> <br />
	<tr> <br />
	<th> Shipping Handling, Installation, etc </th> <th> Expense </th> <br />
	</tr> <br />
	<tr> <br />
	<td rowspan="2"> 1. </td> <br />
	<td rowspan="2"> <img src="Crystal_mycomputer.png" /> </td> <br />
	<td> IBM Clone Computer. </td> <td> $ 400.00 </td> <br />
	</tr> <br />
	<tr> <br />
	<td> Shipping Handling, Installation, etc </td> <td> $ 20.00 </td> <br />
	</tr> <br />
	<tr> <br />
	<td rowspan="2"> 2. </td> <br />
	<td rowspan="2"> <img src="Crystal_kcmmemory.png" /> </td> <br />
	<td> 1GB RAM Module for Computer. </td> <td> $ 50.00 </td> <br />
	</tr> <br />
	<tr> <br />
	<td> Shipping Handling, Installation, etc </td> <td> $ 14.00 </td> <br />
	</tr> <br />
	<tr> <br />
	<th colspan="4"> Purchased Equipments (June, 2006) </th>
	</tr> <br />
	</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 ] ''#C0C0C0'' and the ''gray'' color, with ''#ECE9D8'' for ].

	Wiki code''':'''
	{\| border="0"
	\| style="border: 1px dashed #2f6fab; background-color: #f9f9f9;" \|
	<tt>
	{\| border="5" cellspacing="5" cellpadding="2" style="border-color: #C0C0C0;" <br />
	! '''colspan'''="4" style="border: 1px groove gray;" \| Purchased Equipments (June, 2006) <br />
	\|- <br />
	! '''rowspan'''="2" style="border: 1px groove gray;" \| Item Num# <br />
	! rowspan="2" style="border: 1px groove gray;" \| Item Picture <br />
	! style="border: 1px groove gray;" \| Item Description <br />
	! style="border: 1px groove gray;" \| Price <br />
	\|- <br />
	! style="border: 1px groove gray;" \| Shipping Handling, Installation, etc <br />
	! style="border: 1px groove gray;" \| Expense <br />
	\|- <br />
	\| rowspan="2" style="border: 1px groove gray;" \| 1. <br />
	\| rowspan="2" style="border: 1px groove gray;" \| [[Image:Crystal_mycomputer.png]] <br />
	\| style="border: 1px groove gray;" \| IBM Clone Computer <br />
	\| style="border: 1px groove gray;" \| $ 400.00 <br />
	\|- <br />
	\| style="border: 1px groove gray;" \| Shipping Handling, Installation, etc <br />
	\| style="border: 1px groove gray;" \| $ 20.00 <br />
	\|- <br />
	\| rowspan="2" style="border: 1px groove gray;" \| 2. <br />
	\| rowspan="2" style="border: 1px groove gray;" \| [[Image:Crystal_kcmmemory.png]] <br />
	\| style="border: 1px groove gray;" \| 1GB RAM Module for Computer. <br />
	\| style="border: 1px groove gray;" \| $ 50.00 <br />
	\|- <br />
	\| style="border: 1px groove gray;" \| Shipping Handling, Installation, etc <br />
	\| style="border: 1px groove gray;" \| $ 14.00 <br />
	\|- <br />
	! colspan="4" style="border: 1px groove gray;" \| Purchased Equipments (June, 2006) <br />
	\|}
	</tt>
	\|}


	==See also==
	* ]
	* ] (List of HTML decimal or hexadecimal code on characters)

	==External links==
	HTML Table Tutorials at:
	*
	*
	*

	]
	]

Latest revision as of 00:07, 7 April 2014

Redirect to:

HTML element#Tables

To a section: This is a redirect from a topic that does not have its own page to a section of a page on the subject. For redirects to embedded anchors on a page, use {{R to anchor}} instead.