Css Snippets » table 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 Border op een TR element? http://www.csssnippets.be/2010/01/border-op-een-tr-element/ http://www.csssnippets.be/2010/01/border-op-een-tr-element/#comments Tue, 05 Jan 2010 07:47:19 +0000 Mark http://www.csssnippets.be/?p=697 Normaal gezien kan je geen border toevoegen op een <tr> element van een tabel, toch niet crossbrowser, maar je kan het heel anders aanpakken:

HTML

<tr>
 <td class="outerleft">bla</td>
 <td>bla</td>
 <td>bla</td>
 <td>bla</td>
 <td class="outerright">bla</td>
</tr>

CSS

td {
 border-top: 2px solid #000;
 border-bottom: 2px solid #000;
}
td.outerleft {
 border-left: 2px solid #000;
}
td.outerright {
 border-right: 2px solid #000;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/01/border-op-een-tr-element/feed/ 0 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 #2: Box model http://www.csssnippets.be/2009/09/table-design-2-box-model/ http://www.csssnippets.be/2009/09/table-design-2-box-model/#comments Wed, 30 Sep 2009 11:50:44 +0000 Mark http://www.csssnippets.be/?p=373 Tabellen zijn gedacht voor het weergeven van data (dat is een globaal begrip) niet om layout van een website te maken. Dit is deel 2 van verschillende mogelijkheden van tabellen van style te voorzien.

HTML

<table summary="Employee Pay Sheet" id="box-table-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

#box-table-a {
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#box-table-a th {
background:#B9C9FE none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:4px solid #AABCFE;
color:#039;
font-size:13px;
font-weight:normal;
padding:8px;
}
#box-table-a td {
background:#E8EDFF none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:1px solid transparent;
color:#669;
padding:8px;
}
#box-table-a tr:hover td {
background:#D0DAFD none repeat scroll 0 0;
color:#339;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/09/table-design-2-box-model/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