Tabele w HTML: przewodnik po tworzeniu i formatowaniu tabel w HTML

Tabela jest podstawowym składnikiem języka HTML służącym do wyświetlania danych w ustrukturyzowanym formacie z wierszami i kolumnami. W HTML tabele są tworzone przy użyciu znaczników <table>, <tr> i <td>.

Znacznik <table> reprezentuje główny kontener tabeli, który zawiera wszystkie wiersze i kolumny. Wiersze są definiowane za pomocą znacznika <tr>(wiersz tabeli), natomiast komórki w wierszach są definiowane za pomocą znacznika <td>(dane tabeli). Dodatkowo możesz użyć znacznika <th>(nagłówek tabeli), aby zdefiniować komórki nagłówka tabeli.

Możesz użyć atrybutów, takich jak colspan i rowspan, aby scalić komórki w tabeli lub rozciągnąć komórki na wiele wierszy i kolumn. Ponadto możesz zastosować właściwości CSS, aby dostosować wygląd i układ tabeli.

Tabela( <table>)

- <table> Element służy do tworzenia tabeli w HTML.

- Dane umieszczane są w wierszach( <tr>) i kolumnach( <td> lub <th>).

- Każda komórka danych jest umieszczona w elementach <td>(komórka danych) lub <th>(komórka nagłówka).

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

Nagłówek kolumny( <th>)

- <th> Element służy do tworzenia nagłówków kolumn w tabeli.

- Zazwyczaj umieszczane w pierwszym rzędzie tabeli.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

Wiersze danych( <tr>):

- <tr> Element służy do tworzenia wierszy danych w tabeli.

- Wewnątrz tych elementów umieszczane są komórki danych( <td>) lub komórki nagłówka(). <th> <tr>

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

Rozpiętość kolumn( colspan)

Atrybut colspan służy do określania liczby kolumn, które obejmie komórka danych lub komórka nagłówka w tabeli.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

Rozpiętość wierszy( rowspan)

Atrybut rowspan służy do określania liczby wierszy, które obejmie komórka danych lub komórka nagłówka w tabeli.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

Scalanie komórek( colspan i rowspan)

Możesz połączyć oba colspan i rowspan atrybuty, aby scalić komórki w tabeli.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

border nieruchomość

- border Właściwość określa grubość obramowania tabeli.

- Wartość border jest nieujemną liczbą całkowitą.

<table border="1">  
<!-- Table rows and columns -->  
</table>  

cellpadding nieruchomość

-, cellpadding Właściwość określa odległość między zawartością komórki a obramowaniem komórki w tabeli.

- Wartość cellpadding jest nieujemną liczbą całkowitą

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

cellspacing nieruchomość

- cellspacing Właściwość określa odstępy między komórkami w tabeli.

- Wartość cellspacing jest nieujemną liczbą całkowitą.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

Te atrybuty i elementy umożliwiają tworzenie i dostosowywanie tabel w HTML do własnych potrzeb. Możesz ich użyć do wyświetlania danych w swojej witrynie w przejrzysty i uporządkowany sposób.