HTML Tabel Exemplu
| Număr | Nume | Numele de familie | puncte |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
Definirea tabele HTML
Exemplu
<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>
Încearcă - l singur » Exemplu explicat:
Tabelele sunt definite cu <table> tag - ul.
Tabelele sunt împărțite în rânduri tabel cu <tr> tag - ul.
Rânduri de masă sunt împărțite în date tabel cu <td> tag.
Un rând de tabel poate fi divizată în poziții de masă cu <th> tag - ul.
Date tabel <td> sunt containere de date din tabel.
Ele pot conține tot felul de elemente HTML, cum ar fi text, imagini, liste, alte tabele, etc.
Un tabel HTML cu un atribut Border
Dacă nu specificați o frontieră pentru masa, acesta va fi afișat fără frontiere.
O frontieră poate fi adăugat folosind border atributului:
Exemplu
<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>
Încearcă - l singur » De border atribut este pe cale de ieșire din standardul HTML! Este mai bine să utilizați CSS.
Pentru a adăuga frontiere, utilizați proprietatea de frontieră CSS:
Amintiți-vă pentru a defini frontierele atât pentru masă și celulele de masă.
Un tabel HTML cu Frontiere colapsate
Dacă doriți ca granițele să se prăbușească într - o singură frontieră, se adaugă CSS border-collapse :
Un tabel HTML cu Cell Padding
Spațiere în celulă specifică spațiul dintre conținutul celulei și a frontierelor sale.
Dacă nu specificați o umplutură, celulele de masă vor fi afișate fără umplutură.
Pentru a seta padding, utilizați CSS padding proprietatea:
Exemplu
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} Încearcă - l singur » HTML Tabelul Pozițiile
Titlurile tabelelor sunt definite cu <th> tag - ul.
În mod implicit, toate browserele principale afișa titlurile de masă ca bold și centrat:
Exemplu
<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>
Încearcă - l singur » Pentru a alinia la stânga titlurile din tabel, utilizați CSS text-align proprietate:
Un tabel HTML cu Spațiere Border
Spațierea Border specifică spațiul dintre celule.
Pentru a seta distanța de frontieră pentru un tabel, utilizați CSS border-spacing proprietate:
În cazul în care masa sa prăbușit granițele, de frontieră Spațiere nu are niciun efect.
Celulele Tabelul care SPAN Multe Coloane
Pentru a face un interval de celule mai mult de o coloană, utilizați colspan atributul:
Exemplu
<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> Încearcă - l singur » Celulele Tabelul care SPAN multe rânduri
Pentru a face un interval de celule mai mult de un rând, utilizați rowspan atributul:
Exemplu
<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> Încearcă - l singur » Un tabel HTML cu o legendă
Pentru a adăuga o legendă la un tabel, utilizați <caption> tag - ul:
Exemplu
<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> Încearcă - l singur » <caption> tag - ul trebuie să fie inserat imediat după <table> tag - ul.
Un stil special pentru un singur tabel
Pentru a defini un stil special pentru o masă specială, adăugați un id atribut la masa:
Exemplu
<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>
Acum puteți defini un stil aparte pentru acest tabel:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Încearcă - l singur » Și adăuga mai multe stiluri:
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;
}
Încearcă - l singur » Rezumatul capitolului
- Utilizați HTML <table> Elementul pentru a defini un tabel
- Utilizați HTML <tr> elementul rând pentru a defini un tabel
- Utilizați HTML <td> Elementul pentru a defini un tabel de date
- Utilizați HTML <th> Element pentru a defini o poziție tabel
- Utilizați HTML <caption> elementul pentru a defini o legendă tabel
- Utilizați CSS border proprietatea de a defini o frontieră
- Utilizați CSS border-collapse proprietatea să se prăbușească frontierele de celule
- Utilizați CSS padding proprietatea de a adăuga padding la celule
- Utilizați CSS text-align proprietatea de a alinia textul celulei
- Utilizați CSS border-spacing proprietatea pentru a seta distanța dintre celule
- Utilizați colspan atributul pentru a face un interval de celule in mai multe coloane
- Utilizați rowspan atributul pentru a face un interval de celule in mai multe rânduri
- Utilizați id atribut pentru a defini în mod unic un tabel
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»
HTML Tabelul Etichete
| Etichetă | Descriere |
|---|---|
| <table> | Definește un tabel |
| <th> | Definește o celula antet într-un tabel |
| <tr> | Definește un rând într-un tabel |
| <td> | Definește o celulă într-un tabel |
| <caption> | Definește o legendă tabel |
| <colgroup> | Specifică un grup de una sau mai multe coloane într-un tabel pentru formatarea |
| <col> | Specifică proprietățile de coloană pentru fiecare coloană într - un <colgroup> Element |
| <thead> | Grupuri conținutul antet într-un tabel |
| <tbody> | Grupuri conținutul corpului într-un tabel |
| <tfoot> | Grupuri conținutul subsol într-un tabel |