SkipCaptcha, nsSupply_SidersR, nsSupply_Siders_
8,436
edits
Changes
added a lot :D
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>
==Borders==
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><TABLE border=5></nowiki>
!colspan="2"|Various Tables and Borders<sup>[[#Note|[1]]]</sup>
<TABLE border=5>
|-
!Code
!Result
|-
|<code><nowiki><table border='3px'></nowiki></code>
|<table border='3px'>
<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>
|-
|
<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>
</table>
|-
<nowiki><TABLE frame=box rules=all border=1></nowiki>
|<code><nowiki><table style="border: 1px solid blue"></nowiki></code>
<TABLE frame=box rules=all border=1>
|<table style="border: 1px solid blue">
<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>
</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]]