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.