Formatowanie tabel za pomocą CSS
Za pomocą kaskadowych arkuszy stylów można kontrolować wygląd tabel. Poniższa tabela pokazuje, które właściwości CSS odpowiadają poszczególnym atrybutom znaczników tabeli:
| Cel | Atrybut tabeli | Właściwości CSS |
| Obramowanie | border | właściwości border |
| Odstęp wewnątrz komórki | cellpadding | padding |
| Odstęp między komórkami | cellspacing | border-spacing |
| Szerokość tabeli | width | właściwości width oraz table-layout |
| Obramowanie tabeli | frame | właściwości border |
| Wyrównanie | align, valign | właściwości text-align, vertical-align |
Aktualizacja: wymienione atrybuty HTML (border, cellpadding, cellspacing, width, align) są dziś przestarzałe (deprecated). Wygląd tabel definiujemy już wyłącznie w CSS, właśnie za pomocą właściwości z prawej kolumny.
Przykłady:
Obramowanie tabeli oraz komórek:
<style>
table, table * {border: 1px solid black}
</style>
<table> <tr><th>Nagłówek 1</th><th>Nagłówek 2</th><th>Nagłówek 3</th></tr> <tr><td>komórka 1</td><td>komórka 2</td><td>komórka 3</td></tr> <tr><td>komórka 4</td><td>komórka 5</td><td>komórka 6</td></tr> <tr><td>komórka 7</td><td>komórka 8</td><td>komórka 9</td></tr> </table>
Tylko obramowanie tabeli:
<style>
table {border: 1px solid black}
</style>
<table> <tr><th>Nagłówek 1</th><th>Nagłówek 2</th><th>Nagłówek 3</th></tr> <tr><td>komórka 1</td><td>komórka 2</td><td>komórka 3</td></tr> <tr><td>komórka 4</td><td>komórka 5</td><td>komórka 6</td></tr> <tr><td>komórka 7</td><td>komórka 8</td><td>komórka 9</td></tr> </table>
Obramowanie komórek:
<style>
table * {border: 1px solid black}
</style>
<table> <tr><th>Nagłówek 1</th><th>Nagłówek 2</th><th>Nagłówek 3</th></tr> <tr><td>komórka 1</td><td>komórka 2</td><td>komórka 3</td></tr> <tr><td>komórka 4</td><td>komórka 5</td><td>komórka 6</td></tr> <tr><td>komórka 7</td><td>komórka 8</td><td>komórka 9</td></tr> </table>
Ukryte puste komórki:
<style>
table, table * {border: 1px solid black}
</style>
<table> <tr><th>Nagłówek 1</th><th>Nagłówek 2</th><th>Nagłówek 3</th></tr> <tr><td>komórka 1</td><td></td><td>komórka 3</td></tr> <tr><td>komórka 4</td><td>komórka 5</td><td></td></tr> <tr><td></td><td>komórka 8</td><td>komórka 9</td></tr> </table>
A jak zrobić tabelę, aby miała trzy rzędy:
w pierwszym rzędzie trzy kolumny
w drugim rzędzie trzy kolumny
a w trzecim rzędzie jedną kolumnę nachodzącą na dwie pozostałe. Tak jak na zamieszczonym zdjęciu. I czy da się? https://uploads.disquscdn.com/images/0f530824207cb74508d1f396974cd50e13f7715953a9a70f5146c849d994604f.png
To się nazywa scalaniem komórek. W HTML odpowiada za to atrybut rowaspan (dla scalania pionowego) gdzie y to liczba komórek do scalenia w pionie:
…