Css Snippets » tabellen http://www.csssnippets.be Snippets for you, snippets for me Mon, 17 Oct 2011 08:42:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Table design #4: Vertikaal zebra http://www.csssnippets.be/2009/10/table-design-4-vertikaal-zebra/ http://www.csssnippets.be/2009/10/table-design-4-vertikaal-zebra/#comments Fri, 09 Oct 2009 07:32:04 +0000 Mark http://www.csssnippets.be/?p=392 Tabellen zijn gedacht voor het weergeven van data (dat is een globaal begrip) niet om layout van een website te maken. Dit is deel 4 van verschillende mogelijkheden van tabellen van style te voorzien.

HTML

<table summary="Most Favorite Movies" id="ver-zebra">
<colgroup>
<col class="vzebra-odd"/>
<col class="vzebra-even"/>
<col class="vzebra-odd"/>
<col class="vzebra-even"/>
    </colgroup>
<thead>
<tr>
<th id="vzebra-comedy" scope="col">Comedy</th>
<th id="vzebra-adventure" scope="col">Adventure</th>
<th id="vzebra-action" scope="col">Action</th>
<th id="vzebra-children" scope="col">Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>Scary Movie</td>
<td>Indiana Jones</td>
<td>The Punisher</td>
<td>Wall-E</td>
</tr>
<tr>
<td>Epic Movie</td>
<td>Star Wars</td>
<td>Bad Boys</td>
<td>Madagascar</td>
</tr>
<tr>
<td>Spartan</td>
<td>LOTR</td>
<td>Die Hard</td>
<td>Finding Nemo</td>
</tr>
<tr>
<td>Dr. Dolittle</td>
<td>The Mummy</td>
<td>300</td>
<td>A Bug’s Life</td>
</tr>
</tbody>
</table>

CSS

#ver-zebra {
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:0 20px 20px;
text-align:left;
width:480px;
}
.vzebra-odd {
background:#EFF2FF none repeat scroll 0 0;
}
.vzebra-even {
background:#E8EDFF none repeat scroll 0 0;
}
#ver-zebra th {
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#003399;
font-size:14px;
font-weight:normal;
padding:12px 15px;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action {
background:#DCE4FF none repeat scroll 0 0;
border-bottom:1px solid #D6DFFF;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children {
background:#D0DAFD none repeat scroll 0 0;
border-bottom:1px solid #C8D4FD;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action {
background:#DCE4FF none repeat scroll 0 0;
border-bottom:1px solid #D6DFFF;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children {
background:#D0DAFD none repeat scroll 0 0;
border-bottom:1px solid #C8D4FD;
}
#ver-zebra td {
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#669;
padding:8px 15px;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/10/table-design-4-vertikaal-zebra/feed/ 0 Table design #3: Horizontaal zebra http://www.csssnippets.be/2009/10/table-design-3-horizontaal-zebra/ http://www.csssnippets.be/2009/10/table-design-3-horizontaal-zebra/#comments Tue, 06 Oct 2009 13:24:16 +0000 Mark http://www.csssnippets.be/?p=387 Tabellen zijn gedacht voor het weergeven van data (dat is een globaal begrip) niet om layout van een website te maken. Dit is deel 3 van verschillende mogelijkheden van tabellen van style te voorzien.

HTML

<table summary="Employee Pay Sheet" id="hor-zebra">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr class="odd">
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>

CSS

#hor-zebra {
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#hor-zebra th {
color:#039;
font-size:14px;
font-weight:normal;
padding:10px 8px;
}
#hor-zebra .odd {
background:#E8EDFF none repeat scroll 0 0;
}
#hor-zebra td {
color:#669;
padding:8px;
}
#hor-zebra .odd {
background:#E8EDFF none repeat scroll 0 0;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/10/table-design-3-horizontaal-zebra/feed/ 0 Table design #1: Horizontaal mini http://www.csssnippets.be/2009/09/table-design-1-horizontaal-mini/ http://www.csssnippets.be/2009/09/table-design-1-horizontaal-mini/#comments Mon, 28 Sep 2009 07:43:30 +0000 Mark http://www.csssnippets.be/?p=371 Tabellen zijn gedacht voor het weergeven van data (dat is een globaal begrip) niet om layout van een website te maken. Dit is deel 1 van verschillende mogelijkheden van tabellen van style te voorzien.

HTML

<table summary="Employee Pay Sheet" id="hor-minimalist-a">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>

CSS

#hor-minimalist-a {
background:#FFF none repeat scroll 0 0;
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#hor-minimalist-a th {
border-bottom:2px solid #6678B1;
color:#039;
font-size:14px;
font-weight:normal;
padding:10px 8px;
}
#hor-minimalist-a td {
color:#669;
border-bottom:1px solid #CCC;
padding:9px 8px 0;
}
#hor-minimalist-b tbody tr:hover td {
color:#009;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/09/table-design-1-horizontaal-mini/feed/ 0 Formulier zonder tabellen http://www.csssnippets.be/2009/04/formulier-zonder-tabellen/ http://www.csssnippets.be/2009/04/formulier-zonder-tabellen/#comments Sat, 04 Apr 2009 16:03:26 +0000 Mark http://www.csssnippets.be/?p=152 Tabellen dienen niet voor bijvoorbeeld een formulier structuur te geven, maar voor data die tabulair dient weer te geven te worden. Dus hier een manier om je formulier te stylen, zonder tabellen.

HTML

<form action="post">
 <p>
  <label for="name">Name</label>
  <input id="name" name="name" />
 </p>
 <p>
  <label for="address">Address</label>
  <input id="address" name="address" />
 </p>
 <p>
  <label for="city">City</label>
  <input id="city" name="city" />
 </p>
 </form>

CSS

label,input  {
display:  block;
width:  150px;
float:  left;
margin-bottom:  10px;
}
label  {
text-align:  right;
width:  75px;
padding-right:  20px;
}
p  {
clear:  left;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/04/formulier-zonder-tabellen/feed/ 0