HTML-i vaiketabelid näevad välja üsna ahvatlevad – jagage need mõne nägusa CSS-i efektiga.
Tabeli lisamine veebisaidile on kasulik viis suurte teabekoguste selgeks esitamiseks. Tabelid pakuvad ka tõhusat ruumikasutust ning võimaldavad lihtsamini lugeda ja võrrelda keerulisi andmeid.
CSS-i abil saate kujundada tabeleid visuaalselt atraktiivsemaks. See võib parandada ka teie veebisaidi üldist kasutajakogemust.
Kaasaegne üherealine ja veergude kujundus
Saate lisada lihtsa tabelikujunduse üksikute ridade ja veergudega ning ilma ühendatud lahtriteta. Tabeli kujundamine tagab ka selle, et teie veebileht on kasutaja jaoks kaasahaarav. Peale laua kujundamise on ka teisi lahedad HTML-efektid ja CSS-i kuvatavate veebisaitide paigutused saate oma veebisaidile lisada.
Selle harjutuse koodi saate vaadata selles GitHubi repo.
- Lisage uude HTML-faili põhiline HTML-koodi struktuur:
html>
<html>
<pea>
<pealkiri>Minu lihtne tabelpealkiri>
pea>
<keha>
keha>
html> - Lisage kehasse tabelisildid:
<laud>
laud> - HTML-tabeli element peaks sisaldama
tabeli rida sildid iga tabeli rea jaoks. Pealkirjade jaoks kasutatakse tavaliselt ülemist rida. Kasuta tabeli päis HTML-sildid, mis tähistavad tabeli iga veergu:
<tr>
<th>1. päisth>
<th>2. päisth>
<th>3. päisth>
tr> - Lisage päiserea alla rohkem ridu. Kasuta tabeli andmed HTML-sildid andmete lisamiseks tabeli igasse lahtrisse:
<tr>
<td>1. rida, 1. veergtd>
<td>1. rida, 2. veergtd>
<td>1. rida, 3. veergtd>
tr>
<tr>
<td>2. rida, 1. veergtd>
<td>2. rida, 2. veergtd>
<td>2. rida, 3. veergtd>
tr>
<tr>
<td>3. rida, 1. veergtd>
<td>3. rida, 2. veergtd>
<td>3. rida, 3. veergtd>
tr>
<tr>
<td>4. rida, 1. veergtd>
<td>4. rida, 2. veergtd>
<td>4. rida, 3. veergtd>
tr>
<tr>
<td>5. rida, 1. veergtd>
<td>5. rida, 2. veergtd>
<td>5. rida, 3. veergtd>
tr> - Lisage peasildi sisse stiilimärgend. Lisage tabelile üldine stiil, näiteks varjud, ümarad tabelinurgad, fondid ja veerised.
<stiilis>
laud {
piiri-kokkuvarisemine: kollaps;
laius: 100%;
värvi: #333;
font-perekond: Arial, sans-serif;
fondi suurus: 14px;
teksti joondamine: vasakule;
piiriraadius: 10px;
ülevool: peidetud;
kast-vari: 0 0 20pxrgba(0, 0, 0, 0.1);
marginaal: auto;
margin-top: 50px;
margin-alumine: 50px;
}
stiilis> - Stiilige tabeli päis, et anda sellele taustavärv ja joondatud tekst:
laudth {
taustavärv: #ff9800;
värvi: #fff;
font-weight: julge;
polsterdus: 10px;
teksti teisendus: suurtähtedega;
tähevahed: 1px;
piiripealne: 1pxtahke#fff;
ääris-alumine: 1pxtahke#ccc;
} - Stiilige tabeli ridu vaheldumisi hallide ja valgete värvidega ning lisage efekti, kui hõljutage kursorit rea kohal.
laudtr:nth-laps (paaris)td {
taustavärv: #f2f2f2;
}laudtr:hõljumatd {
taustavärv: #ffedcc;
} - Stiilige tabeli lahtrites olevad andmed:
laudtd {
taustavärv: #fff;
polsterdus: 10px;
ääris-alumine: 1pxtahke#ccc;
font-weight: julge;
} - Avage oma HTML-fail, et vaadata tabelit veebibrauseris:
Mitme joonega lahtritabeli disain
Mõned tabelid sisaldavad mitmerealise lahtri moodustamiseks ühendatud ridadega veerge.
- Eemaldage kõik praegused tabeli read, jättes alles ainult ülemise koos pealkirjadega:
<laud>
<tr>
<th>1. päisth>
<th>2. päisth>
<th>3. päisth>
tr>
laud> - Looge mitmerealine lahter, kasutades atribuuti rowspan. See laiendab seda lahtrit määratud arvu ridade ulatuses.
1. jagu
<tr>
<tdreavahe="2">Mitmerealine rakktd>
<td>1. rida, 2. veergtd>
<td>1. rida, 3. veergtd>
tr>
<tr>
<td>2. rida, 2. veergtd>
<td>2. rida, 3. veergtd>
tr> - Kui lisate teise mitmelahtrilise rea, millel on erinev reavahemiku väärtus, lisage vastav arv tabeli read HTML sildid. See peab vastama lahtris olevate ridade kõrgusele või arvule. Näiteks kui lahtri ridade pikkus on 3, peate tabeli õigeks joondamiseks lisama teistele veergudele kolm rida.
2. jagu
<tr>
<tdreavahe="3">Mitmerealine rakktd>
<td>3. rida, 2. veergtd>
<td>3. rida, 3. veergtd>
tr>
<tr>
<td>4. rida, 2. veergtd>
<td>4. rida, 3. veergtd>
tr>
<tr>
<td>5. rida, 2. veergtd>
<td>5. rida, 3. veergtd>
tr> - Avage oma HTML-fail, et vaadata tabelit veebibrauseris:
Ühendatud ridatabeli kujundus
Sarnaselt mitmerealistele lahtritele võivad tabelid sisaldada ka ridu, mis liidetakse üle mitme veeru.
- Eemaldage kõik praegused tabeli read, jättes alles ainult ülemise koos pealkirjadega:
<laud>
<tr>
<th>1. päisth>
<th>2. päisth>
<th>3. päisth>
tr>
laud> - Lisage tabelisse rohkem tabeli ridu. Kasutage atribuuti colspan, et ühendada üks rida kolmes veerus:
1. jagu
<tr>
<tdstiilis="taustavärv: #ffedcc"colspan="3">Q1td>
tr>
<tr>
<td>2. rida, 1. veergtd>
<td>2. rida, 2. veergtd>
<td>2. rida, 3. veergtd>
tr>
<tr>
<td>3. rida, 1. veergtd>
<td>3. rida, 2. veergtd>
<td>3. rida, 3. veergtd>
tr>
<tr>
<td>4. rida, 1. veergtd>
<td>4. rida, 2. veergtd>
<td>4. rida, 3. veergtd>
tr> - Tabeli osade eraldamiseks lisage veel üks ühendatud rida:
2. jagu
<tr>
<tdstiilis="taustavärv: #ffedcc"colspan="3">Q2td>
tr>
<tr>
<td>6. rida, 1. veergtd>
<td>6. rida, 2. veergtd>
<td>6. rida, 3. veergtd>
tr>
<tr>
<td>7. rida, 1. veergtd>
<td>7. rida, 2. veergtd>
<td>7. rida, 3. veergtd>
tr>
<tr>
<td>8. rida, 1. veergtd>
<td>8. rida, 2. veergtd>
<td>8. rida, 3. veergtd>
tr> - Avage oma HTML-fail, et vaadata tabelit veebibrauseris:
Kasutage oma andmete parimaks kasutamiseks atraktiivseid tabeleid
HTML-tabelid on suurepärane viis oma veebisaidil struktureeritud andmete kuvamiseks. Vaikimisi välimuse parandamiseks saate neid stiilida CSS-iga. Siiski veenduge, et te ei lase end ära ja kasutage paigutuseks tabeleid – juurdepääsetavuse huvides hoidke neid ainult andmete jaoks.
Suuremate tabelite loomine ja värskendamine võib olla vaevarikas, eriti kui kasutate veerge ja ridu, mis ulatuvad. Saate kirjutada oma koodi, et luua märgistus või kasutada ära sõbralikumaid süntaksisid, nagu Markdown.
