Difference between revisions of "Table Templates"
(→I just want it to work) |
(→I just want it to work) |
||
Line 130: | Line 130: | ||
</css> |
</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 [http://www.csszengarden.com], where the power of css is displayed. (Click on the links on the right) |
||
== I just want it to work== |
== I just want it to work== |
Latest revision as of 16:39, 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>
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>