Stosowanie niesformatowanych tabel według schematu
<table><tr><td></td></tr></table> i skazywanie się w całości na rozwiązania defaultowe, jest zupełnie nieefektywne i tak naprawdę uniemożliwia nam skuteczne i odpowiednie wizualnie zarządzanie tabelami.
Za pomocą znaczników takich jak width: x; , height: x; padding x; margin x; czy border x; (np. border:1px solid black;) możemy określić prostą strukturę tabeli. Dzięki eksperymentowaniu z wartościami tych cech dopasujemy tabelę do szerokości i wysokości np. diva, w którym ma się znajdować, oraz optymalnie rozmieścimy w niej tekst.
Wydaje się jednak, że operowanie tymi podstawowymi znacznikami CSS nie jest wystarczające, aby stworzyć tabele o odpowiednim layoucie. Aby tworzone tabele wyglądały efektownie i jednocześnie spełniały w sensie merytorycznym swoje funkcje, można odwołać się do znaczników CSS3, tworząc profesjonalnie wyglądające projekty.
Przykład elegancko wyglądającej tabeli, wykorzystującej rozwiązania CSS3:
<head>
<style type="text/css">
table
{
width: 75%;
/* określa szerokość tabeli na 75%*/
height:100px;
/* określa wysokość tabeli na 100px*/
padding: 10px;
/* określa margines wewnętrzny na 10 px */
margin: 15px auto 15px auto;
/* określa margines zewnętrzny- tabela zostaje wyśrodkowana */
background-color: white;
/* określa background tabeli */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* określa zaokrąglenie rogów tabeli za pomocą CSS3*/
box-shadow: 5px 5px 50px grey;
-moz-box-shadow: 5px 5px 50px grey;
-webkit-box-shadow:5px 5px 50px grey;
/* określa oceniowanie tabeli za pomocą CSS3*/
}
</style>
</head>
<body>
<table>
<tr>
<td>Tekst</td>
<td>Tekst</td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
<td>Tekst</td>
<td>Tekst</td>
</tr>
</table>
</body>
</html>
Oczywiście w powyższym przykładzie można wprowadzić odpowiednie zmiany modyfikując szerokość i wysokość tabeli, kolor albo obszar ocieniowania. Problemów nie sprawia oczywiście zmienianie ilości wierszy oraz komórek w wierszach i dostosowywanie ich do potrzeb generowanych przez specyfikę prezentowania danych.
CSS daje jednak możliwość określania nie tylko całych tabel, ale również komórek (td) oraz wierszy (tr). Rozwiązaniem, które przyporządkowuje w CSS wybrane cechy i tabelom i komórkom jest:
<style type="text/css">
table, td
{
border:1px solid black;
}
td
{
background-color: grey;
color:white;
}
</style>
Zauważmy, że tło komórek nie wynika z tła całej tabeli (w powyższym przykładzie specjalnie nieokreślonym). Zostało określone jedynie dla elementów <td> za pomocą znacznika css: background-color: grey; .
Pamiętajmy, że formatowanie tabel za pomocą stylów CSS nie różni się w używanych znacznikach CSS od formatowania elementów typu <div>.