Difference between revisions of "Table Templates"

From Bioinformatikpedia
(→‎Basic)
(→‎I just want it to work)
 
(8 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
border: 0px;
  
border: 0px;
 
border-collapse:collapse;
  
border-collapse:collapse;
  +
width: 40%; /* percentage of browser window that the table occupies (make larger for broader table)*/
−
width: 40%;
  
 
}
  
}
   
Line 11: Line 11:
   
 
.basic th {
  
.basic th {
  +
padding: 5px; /* higher value increases space between table headline content and separating lines */
−
padding: 5px;
  
−
text-align:center;
 +
text-align:center; /* text alignment in table header */
 
border-bottom: 2px solid black;
  
border-bottom: 2px solid black;
 
}
  
}
   
 
.basic td {
  
.basic td {
  +
padding: 5px; /* higher value increases space between table content and separating lines */
−
padding: 5px;
  
−
text-align:left;
 +
text-align:left; /* table body text alignment */
 
border: 1px solid black;
  
border: 1px solid black;
 
border-left: 0;
  
border-left: 0;
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==
  +
  +
To make the table templates work you need to copy the css code below between <nowiki><css> </css></nowiki> tags at the beginning of your page.
  +
Then, you specify the class name at the beginning of your table 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 150: Line 176:
 
margin-left: auto;
  
margin-left: auto;
 
margin-right: auto;
  
margin-right: auto;
−
border: 0px solid black;
 +
border: 0px;
 
border-collapse:collapse;
  
border-collapse:collapse;
  +
width: 40%; /* percentage of browser window that the table occupies (make larger for broader table)*/
−
width: 40%;
  
 
}
  
}
   
Line 158: Line 184:
   
 
.basic th {
  
.basic th {
  +
padding: 5px; /* higher value increases space between table headline content and separating lines */
−
padding: 5px;
  
−
text-align:center;
 +
text-align:center; /* text alignment in table header */
 
border-bottom: 2px solid black;
  
border-bottom: 2px solid black;
−  
 
}
  
}
   
 
.basic td {
  
.basic td {
  +
padding: 5px; /* higher value increases space between table content and separating lines */
−
padding: 5px;
  
−
text-align:left;
 +
text-align:left; /* table body text alignment */
 
border: 1px solid black;
  
border: 1px solid black;
 
border-left: 0;
  
border-left: 0;
Line 181: Line 206:
   
 
===Basic2===
  
===Basic2===
  +
<pre>
−  
  +
class="basic2"
  +
</pre>
 
{|class="basic2"
  
{|class="basic2"
 
! Text || Text || Text
  
! Text || Text || Text
Line 193: Line 220:
 
| 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===
  
===Color===
   
  +
<pre>
  +
class="colBasic"
  +
</pre>
 
{|class="colBasic"
  
{|class="colBasic"
 
! Text || Text || Text
  
! Text || Text || Text
Line 207: Line 277:
 
| 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===
  
===Color2===
   
  +
<pre>
  +
class="colBasic2"
  +
</pre>
 
{|class="colBasic2"
  
{|class="colBasic2"
 
! Text || Text || Text
  
! Text || Text || Text
Line 220: Line 324:
 
| 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>
   
 
== I want to know more==
  
== I want to know more==

Latest revision as of 15: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>

I want to know more

Retrieved from "https://i12r-studfilesrv.informatik.tu-muenchen.de/wiki/index.php?title=Table_Templates&oldid=32426"