Tabelele HTML implicite arată destul de dezamăgitor – dinamizați-le cu câteva efecte CSS arătoase.
Adăugarea unui tabel pe site-ul dvs. este o modalitate utilă de a prezenta clar cantități mari de informații. Tabelele oferă, de asemenea, o utilizare eficientă a spațiului și vă permit să citiți și să comparați mai ușor datele complexe.
Puteți proiecta tabele pentru a fi mai atractive vizual folosind CSS. Procedând astfel, puteți îmbunătăți experiența generală a utilizatorului pentru site-ul dvs.
Design modern cu rânduri și coloane unice
Puteți adăuga un design simplu de tabel cu rânduri și coloane simple și fără celule îmbinate. Stilizarea tabelului asigură, de asemenea, că pagina dvs. web este captivantă pentru utilizator. În afară de stilul mesei, există și altele efecte HTML interesante și CSS afișează aspectul site-ului web poti adauga pe site-ul tau.
Puteți vizualiza codul pentru acest exercițiu în acesta Repoziție GitHub.
- Într-un fișier HTML nou, adăugați structura codului HTML de bază:
html>
<html>
<cap>
<titlu>Masa mea simplătitlu>
cap>
<corp>
corp>
html> - În interiorul corpului, adăugați etichete de tabel:
<masa>
masa> - Elementul tabel HTML ar trebui să conțină rând de masă etichete pentru fiecare rând din interiorul tabelului. Rândul de sus este folosit în mod obișnuit pentru titluri. Utilizare antetul tabelului Etichete HTML pentru a reprezenta fiecare coloană din tabel:
<tr>
<th>Antetul 1th>
<th>Antetul 2th>
<th>Antetul 3th>
tr> - Adăugați mai multe rânduri sub rândul antet. Utilizare date din tabel Etichete HTML pentru a adăuga date în fiecare celulă din tabel:
<tr>
<td>Rândul 1, coloana 1td>
<td>Rândul 1, coloana 2td>
<td>Rândul 1, coloana 3td>
tr>
<tr>
<td>Rândul 2, coloana 1td>
<td>Rândul 2, coloana 2td>
<td>Rândul 2, coloana 3td>
tr>
<tr>
<td>Rândul 3, coloana 1td>
<td>Rândul 3, coloana 2td>
<td>Rândul 3, coloana 3td>
tr>
<tr>
<td>Rândul 4, coloana 1td>
<td>Rândul 4, coloana 2td>
<td>Rândul 4, coloana 3td>
tr>
<tr>
<td>Rândul 5, coloana 1td>
<td>Rândul 5, coloana 2td>
<td>Rândul 5, coloana 3td>
tr> - Adăugați o etichetă de stil în interiorul etichetei head. Adăugați un stil general la tabel, cum ar fi umbre, colțuri rotunjite ale tabelului, fonturi și margini:
<stil>
masa {
frontieră-colaps: colaps;
lăţime: 100%;
culoare: #333;
familie de fonturi: Arial, sans-serif;
marimea fontului: 14px;
aliniere text: stânga;
hotar-raza: 10px;
revărsare: ascuns;
cutie-umbră: 0 0 20pxrgba(0, 0, 0, 0.1);
marginea: auto;
margine-top: 50px;
margine-fond: 50px;
}
stil> - Stilați antetul tabelului pentru a-i da o culoare de fundal și un text aliniat:
masath {
culoare de fundal: #ff9800;
culoare: #fff;
grosimea fontului: îndrăzneţ;
căptușeală: 10px;
text-transformare: majuscule;
spațiul dintre litere: 1px;
chenar-top: 1pxsolid#fff;
chenar-de jos: 1pxsolid#ccc;
} - Stilați rândurile tabelului pentru a alterna culorile gri și alb și pentru a adăuga un efect atunci când treceți cu mouse-ul peste rând:
masatr:al-al-lea copil (chiar)td {
culoare de fundal: #f2f2f2;
}masatr:planaretd {
culoare de fundal: #ffedcc;
} - Stilați datele din interiorul celulelor tabelului:
masatd {
culoare de fundal: #fff;
căptușeală: 10px;
chenar-de jos: 1pxsolid#ccc;
grosimea fontului: îndrăzneţ;
} - Deschideți fișierul HTML pentru a vizualiza tabelul într-un browser web:
Design de masă cu celule cu mai multe linii
Unele tabele includ coloane cu rânduri îmbinate pentru a forma o celulă cu mai multe rânduri.
- Eliminați toate rândurile curente ale tabelului, păstrând doar cel de sus cu titlurile:
<masa>
<tr>
<th>Antetul 1th>
<th>Antetul 2th>
<th>Antetul 3th>
tr>
masa> - Creați o celulă cu mai multe rânduri folosind atributul rowspan. Aceasta va extinde acea celulă pe numărul specificat de rânduri.
Sectiunea 1
<tr>
<tdlungimea rândurilor="2">Celulă cu mai multe liniitd>
<td>Rândul 1, coloana 2td>
<td>Rândul 1, coloana 3td>
tr>
<tr>
<td>Rândul 2, coloana 2td>
<td>Rândul 2, coloana 3td>
tr> - Când adăugați o altă linie multicelulară cu o valoare diferită a intervalului de rânduri, adăugați numărul corespunzător de rânduri de tabel Etichete HTML. Aceasta este pentru a se potrivi cu înălțimea sau numărul de rânduri pe care se întinde celula. De exemplu, dacă o celulă are o lungime de rânduri de 3, va trebui să adăugați trei rânduri la celelalte coloane pentru a alinia corect tabelul.
Sectiunea 2
<tr>
<tdlungimea rândurilor="3">Celulă cu mai multe liniitd>
<td>Rândul 3, coloana 2td>
<td>Rândul 3, coloana 3td>
tr>
<tr>
<td>Rândul 4, coloana 2td>
<td>Rândul 4, coloana 3td>
tr>
<tr>
<td>Rândul 5, coloana 2td>
<td>Rândul 5, coloana 3td>
tr> - Deschideți fișierul HTML pentru a vizualiza tabelul într-un browser web:
Design tabel cu rânduri îmbinate
Similar celulelor cu mai multe rânduri, tabelele pot avea și rânduri care se îmbină pe mai multe coloane.
- Eliminați toate rândurile curente ale tabelului, păstrând doar cel de sus cu titlurile:
<masa>
<tr>
<th>Antetul 1th>
<th>Antetul 2th>
<th>Antetul 3th>
tr>
masa> - Adăugați mai multe rânduri la tabel. Utilizați atributul colspan pentru a îmbina unul dintre rânduri pe 3 coloane:
Sectiunea 1
<tr>
<tdstil=„culoarea fundalului: #ffedcc”colspan="3">Î1td>
tr>
<tr>
<td>Rândul 2, coloana 1td>
<td>Rândul 2, coloana 2td>
<td>Rândul 2, coloana 3td>
tr>
<tr>
<td>Rândul 3, coloana 1td>
<td>Rândul 3, coloana 2td>
<td>Rândul 3, coloana 3td>
tr>
<tr>
<td>Rândul 4, coloana 1td>
<td>Rândul 4, coloana 2td>
<td>Rândul 4, coloana 3td>
tr> - Adăugați un alt rând îmbinat pentru a separa secțiunile tabelului:
Sectiunea 2
<tr>
<tdstil=„culoarea fundalului: #ffedcc”colspan="3">Q2td>
tr>
<tr>
<td>Rândul 6, coloana 1td>
<td>Rândul 6, coloana 2td>
<td>Rândul 6, coloana 3td>
tr>
<tr>
<td>Rândul 7, coloana 1td>
<td>Rândul 7, coloana 2td>
<td>Rândul 7, coloana 3td>
tr>
<tr>
<td>Rândul 8, coloana 1td>
<td>Rândul 8, coloana 2td>
<td>Rândul 8, coloana 3td>
tr> - Deschideți fișierul HTML pentru a vizualiza tabelul într-un browser web:
Utilizați tabele atractive pentru a profita la maximum de datele dvs
Tabelele HTML sunt o modalitate excelentă de a afișa date structurate pe site-ul dvs. web. Le puteți stila cu CSS pentru a îmbunătăți aspectul implicit. Cu toate acestea, asigurați-vă că nu vă lăsați duși de cap și folosiți tabele pentru aspect - din motive de accesibilitate, păstrați-le strict pentru date.
Tabelele mai mari pot fi laborioase de creat și actualizat, mai ales dacă utilizați coloane și rânduri care se întind. Puteți scrie propriul cod pentru a genera marcajul sau puteți profita de sintaxe mai prietenoase, cum ar fi Markdown.
