Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kursy /Frontend SELF PL /Stylizacja tabel

Stylizacja tabel

Frontend SELF PL
Poziom 5 , Lekcja 4
Dostępny

9.1 Użycie atrybutów

Stylizacja tabel w HTML może być wykonana na różne sposoby. Jeden z nich to użycie atrybutów bezpośrednio w tagu tabeli i jej elementach. Choć nowocześni web deweloperzy zazwyczaj wolą używać CSS do stylizacji, zrozumienie atrybutów HTML jest przydatne do podstawowej stylizacji.

Podstawowe atrybuty tabeli

Atrybut border

Określa grubość krawędzi tabeli. Zazwyczaj wartość podaje się w pikselach.

HTML
    
      <table border="1">
        <tr>
          <th>Imię</th>
          <th>Ocena</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Atrybut cellpadding:

Określa wewnętrzne marginesy komórek (marginesy wewnątrz komórek od ich krawędzi).

HTML
    
      <table cellpadding="10">
        <tr>
          <th>Imię</th>
          <th>Ocena</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>
Java university

Atrybut cellspacing:

Określa odstęp między komórkami.

HTML
    
      <table cellspacing="5">
        <tr>
          <th>Imię</th>
          <th>Ocena</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Atrybuty width i height:

Określają szerokość i wysokość tabeli. Te atrybuty można również użyć w tagach <td> i <th> do ustawiania rozmiaru komórek.

HTML
    
      <table style="text-align: left;" width="100%" height="200">
        <tr>
          <th width="50%">Imię</th>
          <th width="25%">Projekt</th>
          <th width="25%">Miasto</th>
        </tr>
        <tr>
          <td>Alicja</td>
          <td>25</td>
          <td>Paryż</td>
        </tr>
      </table>

Atrybut align:

Określa wyrównanie tabeli na stronie (left, right, center).

HTML
    
      <table align="center">
        <tr>
          <th>Imię</th>
          <th>Ocena</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Atrybut bgcolor:

Określa kolor tła tabeli lub komórek.

HTML
    
      <table bgcolor="#f0f0f0">
        <tr>
          <th>Imię</th>
          <th>Ocena</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

9.2 Atrybuty dla komórek tabeli

Atrybuty dla komórek tabeli

Atrybut colspan:

Łączy komórki poziomo.

HTML
    
      <td colspan="2">Połączona komórka</td>

Atrybut rowspan:

Łączy komórki pionowo.

HTML
    
      <td rowspan="2">Połączona komórka</td>

Atrybut align:

Określa poziome wyrównanie zawartości komórki (left, right, center).

HTML
    
      <td align="center">Wyśrodkowany tekst</td>

Atrybut valign:

Określa pionowe wyrównanie zawartości komórki (top, middle, bottom).

HTML
    
      <td valign="top">Tekst przy górnej krawędzi</td>

Atrybut bgcolor:

Określa kolor tła dla komórki.

HTML
    
      <td bgcolor="#ffcc00">Kolorowe tło</td>

9.3 Pełny przykład

Pełny przykład stylizacji tabeli z atrybutami:

HTML
    
      <table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
        <caption>Lista studentów i ich oceny</caption>
        <thead bgcolor="#c0c0c0">
          <tr>
            <th align="left">Imię</th>
            <th align="center">Wiek</th>
            <th align="right">Miasto</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ivan</td>
            <td align="center">30</td>
            <td align="right">Londyn</td>
          </tr>
          <tr>
            <td colspan="2" align="center">Maria i Piotr</td>
            <td align="right">Liverpool</td>
          </tr>
          <tr>
            <td rowspan="2" valign="middle">Anna</td>
            <td>25</td>
            <td>Manchester</td>
          </tr>
          <tr>
            <td>27</td>
            <td>Leeds</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3" align="center">Koniec tabeli</td>
        </tfoot>
      </table>

Objaśnienie przykładu

  • border="1": ustawia krawędź tabeli o grubości 1 piksela
  • cellpadding="10": ustawia wewnętrzny margines na 10 pikseli dla wszystkich komórek tabeli
  • cellspacing="5": ustawia odstęp na 5 pikseli między komórkami tabeli
  • width="80%": ustawia szerokość tabeli na 80% szerokości elementu rodzicielskiego
  • align="center": centrumje tabelę na stronie
  • bgcolor="#e0e0e0": ustawia kolor tła dla tabeli
  • <caption>: dodaje nagłówek tabeli
  • <thead> i <tbody>: grupują nagłówki i ciało tabeli. Kolor tła dla nagłówków ustawiony przy użyciu bgcolor="#c0c0c0"
  • <th> i <td>: służą do definiowania komórek nagłówków i danych
  • <align> i <valign>: określają poziome i pionowe wyrównanie zawartości komórek
  • <colspan> i <rowspan>: łączą komórki poziomo i pionowo
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION