Jak zrobić tabelę w HTML?

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>

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.