Table Templates

<css> table.basic { margin-left: auto; margin-right: auto; border: 0px; border-collapse:collapse; width: 40%; /* percentage of browser window that the table occupies (make larger for broader table)*/ }

.basic th { padding: 5px; /* higher value increases space between table headline content and separating lines */ text-align:center; /* text alignment in table header */ border-bottom: 2px solid black; }

.basic td { padding: 5px; /* higher value increases space between table content and separating lines */ text-align:left; /* table body text alignment */ border: 1px solid black; border-left: 0; border-right: 0; border-bottom:0; }

.basic tr:first-child th {

 border-top: 0;

}

table.basic2 { margin-left: auto; margin-right: auto; border: 0px solid black; border-collapse:collapse; width: 40%; }

.basic2 th,td { padding: 3px; border: 1px solid black; }

.basic2 th { border-bottom: 2px solid black; background-color: #fff; }

.basic2 td { text-align:left; }

.basic2 tr:first-child th {

 border-top: 0;

} .basic2 tr:last-child td {

 border-bottom: 0;

} .basic2 tr td:first-child, .basic2 tr th:first-child {

 border-left: 0;

} .basic2 tr td:last-child, .basic2 tr th:last-child {

 border-right: 0;

}

table.colBasic { margin-left: auto; margin-right: auto; border: 1px solid black; border-collapse:collapse; width: 40%; }

.colBasic th,td { padding: 3px; border: 1px solid black; }

.colBasic td { text-align:left; }

/* for orange try #ff7f00 and #ffaa56 for blue try #005fbf and #aad4ff

maria's style blue: #adceff grey: #efefef

• /

.colBasic tr th { background-color:#ffaa56; color: white;} .colBasic tr:first-child th { background-color:#ff7f00; color:white;}

table.colBasic2 { margin-left: auto; margin-right: auto; border: 1px solid black; border-collapse:collapse; width: 40%; }

.colBasic2 th,td { padding: 3px; border: 1px solid black; }

.colBasic2 td { text-align:left; }

/* for orange try #ff7f00 and #ffaa56 for blue try #005fbf and #aad4ff

maria's style blue: #adceff grey: #efefef

• /

.colBasic2 tr th { background-color:#efefef; color: black;} .colBasic2 tr:first-child th { background-color:#adceff; color:black;}

</css>

HTML, which the wikimedia script language is based on, offers only very crude design commands. Webdesign nowadays is mostly done using Cascading style sheets (css). So HTML describes the content of the site and CSS describes how that content is arranged and how the site looks like. Since formatting tables in html can be a pain, I created these templates that can easily be used without knowing anything about CSS. Those who are interested can take a look at the CSS Zen Garden [1], where the power of css is displayed. (Click on the links on the right)

I just want it to work

To make the table templates work you need to copy the css code below between <css> </css> tags at the beginning of your page. Then, you specify the class name at the beginning of your table as follows:

{|class="basic"
! Text || Text || Text
|-
! Text || Text || Text
|-
| Text || Text || Text
|-
| Text || Text || Text
|-
| Text || Text || Text
|}

Where class="basic" can be replaced by any of the following templates. If you feel like it, you are welcome to add more templates.

Basic

class="basic"

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<source lang="css"> table.basic { margin-left: auto; margin-right: auto; border: 0px; border-collapse:collapse; width: 40%; /* percentage of browser window that the table occupies (make larger for broader table)*/ }

.basic th { padding: 5px; /* higher value increases space between table headline content and separating lines */ text-align:center; /* text alignment in table header */ border-bottom: 2px solid black; }

.basic td { padding: 5px; /* higher value increases space between table content and separating lines */ text-align:left; /* table body text alignment */ border: 1px solid black; border-left: 0; border-right: 0; border-bottom:0; }

.basic tr:first-child th {

 border-top: 0;

}

</source>

Basic2

class="basic2"

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<source lang="css"> table.basic2 { margin-left: auto; margin-right: auto; border: 0px solid black; border-collapse:collapse; width: 40%; }

.basic2 th,td { padding: 3px; border: 1px solid black; }

.basic2 th { border-bottom: 2px solid black; background-color: #fff; }

.basic2 td { text-align:left; }

.basic2 tr:first-child th {

 border-top: 0;

} .basic2 tr:last-child td {

 border-bottom: 0;

} .basic2 tr td:first-child, .basic2 tr th:first-child {

 border-left: 0;

} .basic2 tr td:last-child, .basic2 tr th:last-child {

 border-right: 0;

}

</source>

Color

class="colBasic"

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<source lang="css"> table.colBasic { margin-left: auto; margin-right: auto; border: 1px solid black; border-collapse:collapse; width: 40%; }

.colBasic th,td { padding: 3px; border: 1px solid black; }

.colBasic td { text-align:left; }

/* for orange try #ff7f00 and #ffaa56 for blue try #005fbf and #aad4ff

maria's style blue: #adceff grey: #efefef

• /

.colBasic tr th { background-color:#ffaa56; color: white;} .colBasic tr:first-child th { background-color:#ff7f00; color:white;}

</source>

Color2

class="colBasic2"

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<source lang="css">

table.colBasic2 { margin-left: auto; margin-right: auto; border: 1px solid black; border-collapse:collapse; width: 40%; }

.colBasic2 th,td { padding: 3px; border: 1px solid black; }

.colBasic2 td { text-align:left; }

/* for orange try #ff7f00 and #ffaa56 for blue try #005fbf and #aad4ff

maria's style blue: #adceff grey: #efefef

• /

.colBasic2 tr th { background-color:#efefef; color: black;} .colBasic2 tr:first-child th { background-color:#adceff; color:black;} </source>