Tabele w HTML są wykorzystywane do prezentacji danych w strukturalny i czytelny sposób. W tym artykule dowiesz się, jak krok po kroku zrobić tabelę w HTML, korzystając z odpowiednich tagów i atrybutów.
1. Użyj tagu <table> do stworzenia tabeli
Pierwszym krokiem w tworzeniu tabeli w HTML jest użycie tagu <table>. Ten tag definiuje tabelę i jest elementem blokowym, co oznacza, że domyślnie zajmuje całą szerokość swojego kontenera.
<table>
</table>
2. Dodaj wiersze za pomocą tagu <tr>
Wiersze tabeli są reprezentowane przez tag <tr>, który jest skrótem od „table row”. Każdy wiersz tabeli musi być umieszczony wewnątrz tagu <table>.
<table>
<tr>
</tr>
</table>
3. Dodaj komórki za pomocą tagu <td> lub <th>
Aby dodać komórki w wierszu, użyj tagu <td> (table data) lub <th> (table header) dla nagłówków tabeli. Tag <td> reprezentuje komórkę danych, podczas gdy tag <th> jest używany do oznaczenia komórki nagłówka.
<table>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr> <td>Komórka 1</td>
<td>Komórka 2</td>
</tr>
</table>
| Nagłówek 1 | Nagłówek 2 |
|---|---|
| Komórka 1 | Komórka 2 |
4. Zastosuj atrybuty dla formatowania tabeli
Aby zmienić wygląd tabeli, możesz użyć różnych atrybutów w tagach <table>, <tr>, <th> i <td>. Poniżej przedstawiamy kilka przykładów:
– Atrybut „border” w tagu <table> pozwala na dodanie obramowania do tabeli:
<table border=”1″>
…
</table>
– Atrybut „cellpadding” w tagu <table> pozwala na dodanie wewnętrznego marginesu komórek:
<table cellpadding=”5″>
…
</table>
– Atrybut „cellspacing” w tagu <table> pozwala na kontrolowanie odległości między komórkami:
<table cellspacing=”5″>
…
</table>
– Atrybuty „width” i „height” w tagach <td> i <th> pozwalają na kontrolowanie szerokości i wysokości komórek:
<td width=”100″ height=”50″>
…
</td>
– Atrybut „colspan” w tagach <td> i <th> pozwala na łączenie komórek w poziomie:
<td colspan=”2″>
…
</td>
– Atrybut „rowspan” w tagach <td> i <th> pozwala na łączenie komórek w pionie:
<td rowspan=”2″>
…
</td>
5. Stylizuj tabelę za pomocą CSS
Aby jeszcze bardziej spersonalizować wygląd tabeli, możesz użyć arkuszy stylów CSS. Możesz dodać style do konkretnych komórek lub całej tabeli, stosując odpowiednie selektory CSS.
<style> table {
border-collapse: collapse; width: 100%;
}
th, td {
border: 1px solid black; padding: 8px; text-align: left;
}
th {
background-color: #f2f2f2;
} </style>
Teraz, gdy już wiesz, jak zrobić tabelę w HTML, możesz zacząć eksperymentować z różnymi atrybutami i stylami CSS, aby osiągnąć pożądany wygląd i funkcjonalność dla swojej tabeli.
