Difference between revisions of "Table Templates"
(→Color2) |
(→I just want it to work) |
||
| Line 132: | Line 132: | ||
== I just want it to work== |
== 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. |
||
| + | At the beginning of your table you specify the class name as follows: |
||
| + | |||
| + | <pre> |
||
| + | {|class="basic" |
||
| + | ! Text || Text || Text |
||
| + | |- |
||
| + | ! Text || Text || Text |
||
| + | |- |
||
| + | | Text || Text || Text |
||
| + | |- |
||
| + | | Text || Text || Text |
||
| + | |- |
||
| + | | Text || Text || Text |
||
| + | |} |
||
| + | </pre> |
||
| + | |||
| + | 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=== |
===Basic=== |
||
| + | <pre> |
||
| + | class="basic" |
||
| + | </pre> |
||
{|class="basic" |
{|class="basic" |
||
! Text || Text || Text |
! Text || Text || Text |
||
| Line 180: | Line 202: | ||
===Basic2=== |
===Basic2=== |
||
| + | <pre> |
||
| − | |||
| + | class="basic2" |
||
| + | </pre> |
||
{|class="basic2" |
{|class="basic2" |
||
! Text || Text || Text |
! Text || Text || Text |
||
| Line 235: | Line 259: | ||
===Color=== |
===Color=== |
||
| + | <pre> |
||
| + | class="colBasic" |
||
| + | </pre> |
||
{|class="colBasic" |
{|class="colBasic" |
||
! Text || Text || Text |
! Text || Text || Text |
||
| Line 279: | Line 306: | ||
===Color2=== |
===Color2=== |
||
| + | <pre> |
||
| + | class="colBasic2" |
||
| + | </pre> |
||
{|class="colBasic2" |
{|class="colBasic2" |
||
! Text || Text || Text |
! Text || Text || Text |
||
Revision as of 15:24, 12 June 2013
<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>
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. At the beginning of your table you specify the class name 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>
