Difference between revisions of "HTML table formatting"

From Conservapedia
Jump to navigation Jump to search
(GASP! I had to manually make the table look like a wikitable because if you just do the class then it messes up the tables that are inside this table = phew)
(clean up)
 
(58 intermediate revisions by 5 users not shown)
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''' key component of [[HTML]] markup; tables are often used as templates for site layout, although it is more common and more widely accepted to use "div" tags, saving tables to display information that would typically be presented in such a table.
 +
 
 
==Syntax==
 
==Syntax==
 +
 
===Standard===
 
===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 <code><nowiki><td></nowiki></code> tag which stands for "table data" - i.e. every box inside the row.
+
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 <code><nowiki><td></nowiki></code> tag which stands for "table data" - i.e. every box inside the row. Each td and tr tag must be closed, as must the table tag. (<code><nowiki></td></tr></table></nowiki></code>)
 
{| width="50%" align="center" style="background:none;font-variant:small-caps"
 
{| width="50%" align="center" style="background:none;font-variant:small-caps"
 
|-
 
|-
Line 12: Line 14:
 
| style="background:clear"|<-- ''This blue item is the'' '''table row'''
 
| style="background:clear"|<-- ''This blue item is the'' '''table row'''
 
|}
 
|}
 +
How that was done:<br/>
 +
<nowiki><table></nowiki>
 +
{|  style="background:none;" CELLPADDING=5
 +
|-
 +
|style="border:none"|<nowiki><tr></nowiki>
 +
|style="border-right:1px solid black; border-left:1px solid black; border-top:1px solid black; border-bottom:1px solid black;"|<nowiki><td style="background:black" ><br/></td></nowiki>
 +
|style="border-right:1px solid black; border-left:1px solid black; border-top:1px solid black; border-bottom:1px solid black;"|<nowiki><td style="background:black" ><br/></td></nowiki>
 +
|style="border:none"|<nowiki></tr></nowiki>
 +
|-
 +
|style="border:none"|<nowiki><tr></nowiki>
 +
|style="border-right:1px solid black; border-left:1px solid black; border-top:1px solid black; border-bottom:1px solid black;" colspan="2"|<nowiki><td "colspan="2"><br/></td></nowiki>
 +
|style="border:none"|<nowiki></tr></nowiki>
 +
|}
 +
</table>
 +
 
===Colspan and Rowspan===
 
===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.
 
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.
Line 34: Line 51:
 
|border="none"|<-- ''This row has only two table datas, because its first is being taken up.
 
|border="none"|<-- ''This row has only two table datas, because its first is being taken up.
 
|}
 
|}
 +
 
===Borders===
 
===Borders===
−
Border can be done one of two ways. Typically the best way to do borders is having a border variable isolated - as in:
+
Border can be done one of two ways.
−
<code><nowiki><TABLE border='3px'></nowiki></code>
+
 
 +
====Separated====
 +
The most common way to do borders is having a border variable isolated - as in:
 +
<code><nowiki><TABLE border='3px'></nowiki></code> However this element is relatively restricted - as you are unable to efficiently change the color of the border because the element "bordercolor" does not work on all browsers.
 +
 
 +
====Style====
 +
Border can also be combined with the style variable. 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>
+
===Frames and Rules===
−
<!--For this table DO NOT use any classes - they screw up the tables that are inside of this - I've manually made the table essentially the class -->
+
Frames and Rules are different ways of formating tables. Put simply, frames are the outside border of the table, and rules are the inside borders. In [[Firefox]], rules is commonly used when borders are in the style element because it allows an inside border to show up. In [[Internet Explorer]], this can't be done.
−
{| style="margin:1em 1em 1em 0; background:#F9F9F9; border:1px; border:1px #AAA solid; border-collapse:collapse"
+
 
 +
{| 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>
 
!colspan="4" style=" border:1px #AAA solid; background:#F2F2F2;"|Various Tables and Borders<sup>[[#Note|[1]]]</sup>
 
|-
 
|-
−
!style=" border:1px #AAA solid; background:#F2F2F2;"|Code
+
!style=" border:1px #AAA solid; background:#F2F2F2;" width="40%"|Code
−
!style=" border:1px #AAA solid; background:#F2F2F2;"|Result
+
!style=" border:1px #AAA solid; background:#F2F2F2;" width="10%"|Result
−
!style=" border:1px #AAA solid; background:#F2F2F2;"|Code
+
!style=" border:1px #AAA solid; background:#F2F2F2;" width="40%"|Code
−
!style=" border:1px #AAA solid; background:#F2F2F2;"|Result
+
!style=" border:1px #AAA solid; background:#F2F2F2;" width="10%"|Result
 
|-
 
|-
−
|style="border-right:1px #AAA solid; border-bottom:1px #AAA solid;"|<code><nowiki><table border='3px'></nowiki></code>
+
 
−
|style="border-bottom:1px #AAA solid;"|
+
<!--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 "|-" -->
−
<table border="3px">
+
 
−
<TR><TD>blue</TD><TD>skies</TD><TR>
+
{{:HTML table formatting/borders1|1=border="1"}}
−
<TR><TD>pink</TD><TD>hearts</TD><TR>
+
{{:HTML table formatting/borders1|1=style="border: 1px solid blue" }}
−
<TR><TD>green</TD><TD>clover</TD><TR>
+
|-
−
</table>
+
{{:HTML table formatting/borders1|1=style="border: 1px solid blue" rules="all"}}
−
|style="border-right:1px #AAA solid; border-left:1px #AAA solid; border-bottom:1px #AAA solid;"|<code><nowiki><table frame=box rules=all border=2></nowiki></code>
+
{{:HTML table formatting/borders1|1=style="border-top:1px solid blue; border-bottom: 3px solid maroon; border-right:none; border-left: 1px double black"}}
−
|style="border-bottom:1px #AAA solid;"|
+
|-
−
<table frame=box rules=all border=2>
+
{{:HTML table formatting/borders1|1=frame="HSides"  rules="all"}}
−
<TR><TD>blue</TD><TD>skies</TD><TR>
+
{{:HTML table formatting/borders1|1=frame="VSides" rules="none"}}
−
<TR><TD>pink</TD><TD>hearts</TD><TR>
 
−
<TR><TD>green</TD><TD>clover</TD><TR>
 
−
</table>
 
 
|-
 
|-
−
|style="border-right:1px #AAA solid;"|<code><nowiki><table style="border: 1px solid blue"></nowiki></code>
+
{{:HTML table formatting/borders1|1= frame="box"}}
−
|<table style="border: 1px solid blue">
+
{{:HTML table formatting/borders1|1=RULES="ROWS"}}
−
<TR><TD>blue</TD><TD>skies</TD><TR>
+
 
−
<TR><TD>pink</TD><TD>hearts</TD><TR>
+
<!--Keep styles above this line -->
−
<TR><TD>green</TD><TD>clover</TD><TR>
 
−
</table>
 
−
|style="border-right:1px #AAA solid; border-left:1px #AAA solid;"|<code><nowiki><</nowiki>table style="border-top:1px solid blue;<br/> border-bottom: 3px solid maroon; <br/>border-right:none; <br/>border-left: 1px double black"<nowiki>></nowiki>
 
−
|<table style="border-top: 1px solid blue; border-bottom: 3px solid maroon; border-right:none; border-left: 1px double black;">
 
−
<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=====
 
=====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]]
+
 
 +
 
 +
===Cellpadding and Cellspacing===
 +
[[Image:Tables-cellpadding.gif|250px|right|This is cellpadding]]
 +
 
 +
====Cellpadding====
 +
Cellpadding controls the distance between the contents of an individual cells i.e. <nowiki><td> tags</nowiki> and the cell boundaries.<br/>
 +
 
 +
====Cellspacing====
 +
Cellspacing controls the distance in between individual cells (i.e. <nowiki><td> tags</nowiki>).
 +
 
 +
== See also ==
 +
 
 +
*[[C programming language]]
 +
 
 +
[[Category:HTML]]

Latest revision as of 19:23, August 19, 2016

HTML table formatting key component of HTML markup; tables are often used as templates for site layout, although it is more common and more widely accepted to use "div" tags, saving tables to display information that would typically be presented in such a table.

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 <td> tag which stands for "table data" - i.e. every box inside the row. Each td and tr tag must be closed, as must the table tag. (</td></tr></table>)



<-- Each black item is a table data

<-- This blue item is the table row

How that was done:
<table>

<tr> <td style="background:black" ><br/></td> <td style="background:black" ><br/></td> </tr>
<tr> <td "colspan="2"><br/></td> </tr>

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.

Separated

The most common way to do borders is having a border variable isolated - as in: <TABLE border='3px'> However this element is relatively restricted - as you are unable to efficiently change the color of the border because the element "bordercolor" does not work on all browsers.

Style

Border can also be combined with the style variable. 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">

Frames and Rules

Frames and Rules are different ways of formating tables. Put simply, frames are the outside border of the table, and rules are the inside borders. In Firefox, rules is commonly used when borders are in the style element because it allows an inside border to show up. In Internet Explorer, this can't be done.

Various Tables and Borders[1]
Code Result Code Result
<table border="1">
blueskies
pinkhearts
greenclover
 <table style="border: 1px solid blue">
blueskies
pinkhearts
greenclover
<table style="border: 1px solid blue" rules="all">
blueskies
pinkhearts
greenclover
 <table style="border-top:1px solid blue; border-bottom: 3px solid maroon; border-right:none; border-left: 1px double black">
blueskies
pinkhearts
greenclover
<table frame="HSides" rules="all">
blueskies
pinkhearts
greenclover
 <table frame="VSides" rules="none">
blueskies
pinkhearts
greenclover
<table frame="box">
blueskies
pinkhearts
greenclover
 <table RULES="ROWS">
blueskies
pinkhearts
greenclover
Note

[1]Borders can also more tediously be set for <td> and <th> tags.


Cellpadding and Cellspacing

This is cellpadding

Cellpadding

Cellpadding controls the distance between the contents of an individual cells i.e. <td> tags and the cell boundaries.

Cellspacing

Cellspacing controls the distance in between individual cells (i.e. <td> tags).

See also

Retrieved from "https://www.conservapedia.com/index.php?title=HTML_table_formatting&oldid=1271610"