Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

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

CelAtrybut tabeliWłaściwości CSS
Obramowanieborderwłaściwości border
Odstęp wewnątrz komórkicellpaddingpadding
Odstęp między komórkamicellspacingborder-spacing
Szerokość tabeliwidthwłaściwości width oraz table-layout
Obramowanie tabeliframewłaściwości border
Wyrównaniealign, valignwłaściwości text-align, vertical-alignment

Przykłady:

Obramowanie tabeli oraz komórek:

tabela
<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:

tabela-obramowanie-bez-komorek
<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:

tabela-obramowanie-komorek
<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:

tabela-puste-komorki
<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>

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, ,

Dodaj komentarz

Komentarze (2)

Odpowiedz

Twój adres e-mail nie zostanie opublikowany.

Pin It on Pinterest