Najnowsze tutoriale tworzenie stron internetowych

Tabele HTML

❮ Poprzedni Następny Rozdział ❯

Tabela Przykład HTML

Numer Pierwsze imię Nazwisko Zwrotnica
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

Definiowanie tabel HTML

Przykład

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Spróbuj sam "

Przykład wyjaśnia:

Tabele są zdefiniowane z <table> tag.

Tabele są podzielone na wiersze z tabeli <tr> etykiety.

Tabela rzędy dzielą się na danych z tabeli <td> tag.

Tabela rząd może być również podzielona na pozycje z tabeli <th> tag.

Dane tabeli <td> pojemniki z danych z tabeli.
Mogą one zawierać wszystkie rodzaje elementów HTML, takich jak tekst, obrazy, listy innych tabel itp

Tabeli HTML z atrybutem Granicznej

Jeśli nie określisz granicę dla tabeli, zostanie on wyświetlony bez granic.

Obramowanie można dodać za pomocą border atrybut:

Przykład

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Spróbuj sam "

border atrybut jest w drodze z standardem HTML! Lepiej jest użyć CSS.

Aby dodawać obramowania, należy użyć właściwości CSS border:

Przykład

table, th, td {
    border: 1px solid black;
}
Spróbuj sam "

Pamiętaj, aby określić granice zarówno tabeli i komórek tabeli.

Tabeli HTML ze zwiniętymi Granic

Jeśli chcesz granice, aby zwinąć w jednej granicy, dodać CSS border-collapse :

Przykład

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
Spróbuj sam "

Tabeli HTML z wyściółką komórkowych

wyściółka komórka określa odstęp między zawartością komórki a jej granicami.

Jeśli nie określisz wyściółkę, komórki tabeli będą wyświetlane bez wyściółki.

Aby ustawić wyściółkę, użyj CSS padding właściwość:

Przykład

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
Spróbuj sam "

HTML Tabela Nagłówki

Nagłówki tabeli zostały określone z <th> tag.

Domyślnie wszystkie główne przeglądarki wyświetlają nagłówki tabeli jako pogrubione i wyśrodkowane:

Przykład

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Spróbuj sam "

Aby wyrównać do lewej nagłówki tabeli, użyj CSS text-align właściwość:

Przykład

th {
    text-align: left;
}
Spróbuj sam "

Tabeli HTML z Odstępy Granicznej

rozstaw granica określa przestrzeń pomiędzy komórkami.

Aby ustawić odstępy graniczną dla tabeli, należy użyć CSS border-spacing właściwość:

Przykład

table {
    border-spacing: 5px;
}
Spróbuj sam "

Jeśli tabela upadł granic, border-spacing nie ma żadnego wpływu.

Komórki tabeli, które obejmują wiele kolumn

Aby rozpiętość komórek więcej niż jednej kolumnie, należy colspan cechę:

Przykład

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
Spróbuj sam "

Komórki tabeli, które obejmują wiele wierszy

Aby rozpiętość komórek więcej niż jednego rzędu użyć rowspan cechę:

Przykład

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>
Spróbuj sam "

Tabeli HTML z podpisem

Aby dodać podpis do tabeli, użyj <caption> tag:

Przykład

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
Spróbuj sam "

<caption> tag musi być włożony bezpośrednio po <table> tag.

A Special Style dla jednej tabeli

Aby zdefiniować specjalny styl na specjalnym stole, dodać id atrybut do tabeli:

Przykład

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Teraz można zdefiniować specjalny styl dla tej tabeli:

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
Spróbuj sam "

I dodać więcej stylów:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}
Spróbuj sam "

Podsumowanie rozdziału

  • Użyj HTML <table> element, aby zdefiniować tabelę
  • Użyj HTML <tr> elementu do zdefiniowania wiersza tabeli
  • Użyj HTML <td> element, aby zdefiniować dane stołowego
  • Użyj HTML <th> Element zdefiniować nagłówek tabeli
  • Użyj HTML <caption> element, aby zdefiniować podpis tabeli
  • Użyj CSS border własności zdefiniować granicę
  • Użyj CSS border-collapse właściwość, aby zwinąć granic komórkowych
  • Użyj CSS padding właściwość, aby dodać dopełnienie do komórek
  • Użyj CSS text-align właściwość, aby wyrównać tekst komórek
  • Użyj CSS border-spacing właściwość, aby ustawić odstępy między komórkami
  • Użyj colspan atrybut aby rozpiętości komórka wiele kolumn
  • Użyj rowspan atrybut aby rozpiętości komórka wiele wierszy
  • Za pomocą id atrybutu jednoznacznie zdefiniować jedną tabelę

Sprawdź się z ćwiczeniami!

Zadanie 1 » ćwiczenia 2» Zadanie 3 » ćwiczenia 4» ćwiczenia 5 » ćwiczenia 6»

Tagi HTML Tabela

Etykietka Opis
<table> Określa tabelę
<th> Definiuje komórkę nagłówka w tabeli
<tr> Określa wiersz w tabeli
<td> Definiuje komórkę w tabeli
<caption> Określa podpis tabeli
<colgroup> Określa grupę jednego lub więcej kolumn w tabeli formatowania
<col> Określa właściwości kolumn dla każdej kolumny w <colgroup> elementu
<thead> Grupy Zawartość nagłówka w tabeli
<tbody> Grupy zawartości ciała w tabeli
<tfoot> Grupy zawartości stopki w tabeli

❮ Poprzedni Następny Rozdział ❯