Difference between revisions of "HTML table formatting"
(added a lot :D) |
|||
| Line 1: | Line 1: | ||
HTML table formatting is cumbersome and often perplexing. For instance, to get rid of the hollow or "chiseled" borders between rows and columns, use these codes: frame=box rules=all | HTML table formatting is cumbersome and often perplexing. For instance, to get rid of the hollow or "chiseled" borders between rows and columns, use these codes: frame=box rules=all | ||
| + | ==Syntax== | ||
| + | ===Standard=== | ||
| + | Every table starts out with the ordinary tag <code><nowiki><table></nowiki></code>. This is typically followed by a <code><nowiki><tr></nowiki></code> tag which signifies the beginning of a new row. This is followed by a <nowiki><code><td></nowiki></code> tag which stands for "table data" - i.e. every box inside the row. | ||
| + | {| width="35%" align="center" style="background:none;font-variant:small-caps" | ||
| + | |- | ||
| + | | style="background:black" width="15%"|<br/> | ||
| + | | style="background:black" width="15%"|<br/> | ||
| + | | border="none"|<-- ''Each black item is a'' '''table data''' | ||
| + | |- | ||
| + | |colspan="2" style="background:blue;"|<br/> | ||
| + | | style="background:clear"|<-- ''This entire blue item is the'' '''table row''' | ||
| + | |} | ||
| + | ===Colspan and Rowspan== | ||
| + | Every row must have the same number of table datas, occasionally table datas have to span more than one column or row. In this case the tags colspan and/or rowspan are used - where they are set to a number. | ||
| + | {| width="55%" align="center" style="background:none;font-variant:small-caps" | ||
| + | |- | ||
| + | | style="background:black" width="5%"|<br/> | ||
| + | | style="background:black" width="5%"|<br/> | ||
| + | | style="background:black" width="5%"|<br/> | ||
| + | | border="none"|<-- ''This row has three'' '''table datas''' | ||
| + | |- | ||
| + | |colspan="2" style="background:blue;"|<br/> | ||
| + | | style="background:black"|<br/> | ||
| + | | border="none"|<-- ''This row has two. The first uses'' '''<code>colspan="2"</code>''' | ||
| + | |- | ||
| + | |rowspan="2" style="background:maroon"|<br/> | ||
| + | | style="background:black"|<br/> | ||
| + | | style="background:black"|<br/> | ||
| + | |border="none"|<-- ''This row has three table datas, but one spans two rows because it uses'' '''<code>rowspan="2"</code>''' | ||
| + | |- | ||
| + | | style="background:black"|<br/> | ||
| + | | style="background:black"|<br/> | ||
| + | |border="none"|<-- ''This row has only two table datas, because its first is being taken up. | ||
| + | |} | ||
| + | ===Borders=== | ||
| + | Border can be done one of two ways. Typically the best way to do borders is having a border variable isolated - as in: | ||
| + | <code><nowiki><TABLE border='3px'></nowiki></code> | ||
| − | == | + | This can also be combined with other elements to change styling. However this element is relatively restricted - as you are unable to efficiently change the color of the border, and alternatively you could present the border as a component of a style variable, however as you can see in the table below - this only works for the outside border. This border argument is presented with 3 sub-components - width, style (hidden, dotted, dashed, solid, double, groove, ridge, inset, outset) and color.<code><nowiki><table style="border: 1px solid blue"></nowiki></code> |
| − | + | {|class="wikitable" | |
| − | <nowiki>< | + | !colspan="2"|Various Tables and Borders<sup>[[#Note|[1]]]</sup> |
| − | < | + | |- |
| + | !Code | ||
| + | !Result | ||
| + | |- | ||
| + | |<code><nowiki><table border='3px'></nowiki></code> | ||
| + | |<table border='3px'> | ||
<TR><TD>blue</TD><TD>skies</TD><TR> | <TR><TD>blue</TD><TD>skies</TD><TR> | ||
<TR><TD>pink</TD><TD>hearts</TD><TR> | <TR><TD>pink</TD><TD>hearts</TD><TR> | ||
<TR><TD>green</TD><TD>clover</TD><TR> | <TR><TD>green</TD><TD>clover</TD><TR> | ||
| − | </ | + | </table> |
| − | + | |- | |
| − | <nowiki>< | + | | |
| − | < | + | <code><nowiki><table frame=box rules=all border=1></nowiki></code> |
| + | | | ||
| + | <table frame=box rules=all border=1> | ||
<TR><TD>blue</TD><TD>skies</TD><TR> | <TR><TD>blue</TD><TD>skies</TD><TR> | ||
<TR><TD>pink</TD><TD>hearts</TD><TR> | <TR><TD>pink</TD><TD>hearts</TD><TR> | ||
<TR><TD>green</TD><TD>clover</TD><TR> | <TR><TD>green</TD><TD>clover</TD><TR> | ||
| − | </ | + | </table> |
| − | + | |- | |
| + | |<code><nowiki><table style="border: 1px solid blue"></nowiki></code> | ||
| + | |<table style="border: 1px solid blue"> | ||
| + | <TR><TD>blue</TD><TD>skies</TD><TR> | ||
| + | <TR><TD>pink</TD><TD>hearts</TD><TR> | ||
| + | <TR><TD>green</TD><TD>clover</TD><TR> | ||
| + | </table> | ||
| + | |} | ||
| + | =====Note===== | ||
| + | <sup>[1]</sup><small>Borders can also more tediously be set for <nowiki><td> and <th></nowiki> tags.</small> | ||
[[category:Website Development]] | [[category:Website Development]] | ||
Revision as of 05:34, August 23, 2007
HTML table formatting is cumbersome and often perplexing. For instance, to get rid of the hollow or "chiseled" borders between rows and columns, use these codes: frame=box rules=all
Syntax
Standard
Every table starts out with the ordinary tag <table>. This is typically followed by a <tr> tag which signifies the beginning of a new row. This is followed by a <code><td></code> tag which stands for "table data" - i.e. every box inside the row.
| <-- Each black item is a table data | ||
| <-- This entire blue item is the table row | ||
=Colspan and Rowspan
Every row must have the same number of table datas, occasionally table datas have to span more than one column or row. In this case the tags colspan and/or rowspan are used - where they are set to a number.
| <-- This row has three table datas | |||
<-- This row has two. The first uses colspan="2"
| |||
<-- This row has three table datas, but one spans two rows because it uses rowspan="2"
| |||
| <-- This row has only two table datas, because its first is being taken up. | |||
Borders
Border can be done one of two ways. Typically the best way to do borders is having a border variable isolated - as in:
<TABLE border='3px'>
This can also be combined with other elements to change styling. However this element is relatively restricted - as you are unable to efficiently change the color of the border, and alternatively you could present the border as a component of a style variable, however as you can see in the table below - this only works for the outside border. This border argument is presented with 3 sub-components - width, style (hidden, dotted, dashed, solid, double, groove, ridge, inset, outset) and color.<table style="border: 1px solid blue">
| Various Tables and Borders[1] | |||||||
|---|---|---|---|---|---|---|---|
| Code | Result | ||||||
<table border='3px'>
|
| ||||||
|
|
| ||||||
<table style="border: 1px solid blue">
|
| ||||||
Note
[1]Borders can also more tediously be set for <td> and <th> tags.
