| Line 54: |
Line 54: |
| | | | |
| | 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> | | 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> |
| − | {{:HTML table formatting/borders2|1= | + | {| style="margin:1em 1em 1em 0; background:#F9F9F9; border:1px; border:1px #AAA solid; border-collapse:collapse; " |
| | + | !colspan="4" style=" border:1px #AAA solid; background:#F2F2F2;"|Various Tables and Borders<sup>[[#Note|[1]]]</sup> |
| | + | |- |
| | + | !style=" border:1px #AAA solid; background:#F2F2F2;" width="40%"|Code |
| | + | !style=" border:1px #AAA solid; background:#F2F2F2;" width="10%"|Result |
| | + | !style=" border:1px #AAA solid; background:#F2F2F2;" width="40%"|Code |
| | + | !style=" border:1px #AAA solid; background:#F2F2F2;" width="10%"|Result |
| | + | |- |
| | | | |
| − | <!--Add you're additions in this style: {{:HTML table formatting/borders1|1=YOU'RE STYLE (i.e. border="1"; style="border:1px solid black" etc. Every 2 add "{{!}}-" --> | + | <!--Add you're additions in this style: {{:HTML table formatting/borders1|1=YOU'RE STYLE (i.e. border="1"; style="border:1px solid black" etc. Every 2 add "|-" --> |
| | | | |
| | {{:HTML table formatting/borders1|1=border='3px'}} | | {{:HTML table formatting/borders1|1=border='3px'}} |
| Line 65: |
Line 72: |
| | | | |
| | <!--Keep styles above this line --> | | <!--Keep styles above this line --> |
| − | }}
| + | |} |
| | | | |
| | =====Note===== | | =====Note===== |
| | <sup>[1]</sup><small>Borders can also more tediously be set for <nowiki><td> and <th></nowiki> tags.</small> | | <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]] |
| | + | ===Cellpadding and Cellspacing=== |
| | + | ====Cellpadding==== |
| | + | ====Cellspacing==== |
| | + | Cellspacing controls the distance in between individual cells (i.e. <nowiki><td> tags</nowiki>). |
| | + | {| style="margin:1em 1em 1em 0; background:#F9F9F9; border:1px; border:1px #AAA solid; border-collapse:collapse; " |
| | + | !colspan="4" style=" border:1px #AAA solid; background:#F2F2F2;"|Various Tables and Borders<sup>[[#Note|[1]]]</sup> |
| | + | |- |
| | + | !style=" border:1px #AAA solid; background:#F2F2F2;" width="40%"|With out Cellspacing |
| | + | !style=" border:1px #AAA solid; background:#F2F2F2;" width="10%"|Result |
| | + | !style=" border:1px #AAA solid; background:#F2F2F2;" width="40%"|With Cellspacing |
| | + | !style=" border:1px #AAA solid; background:#F2F2F2;" width="10%"|Result |
| | + | |- |
| | + | |
| | + | <!--Add you're additions in this style: {{:HTML table formatting/borders1|1=YOU'RE STYLE (i.e. border="1"; style="border:1px solid black" etc. Every 2 add "|-" --> |
| | + | |
| | + | {{:HTML table formatting/borders1}} |
| | + | {{:HTML table formatting/borders1|1=cellspacing="10"}} |
| | + | |
| | + | |
| | + | <!--Keep styles above this line --> |
| | + | |} |