Noklusējuma HTML tabulas izskatās diezgan nepārspējami — uzlabojiet tās ar dažiem izskatīgiem CSS efektiem.
Tabulas pievienošana vietnei ir noderīgs veids, kā skaidri parādīt lielu informācijas apjomu. Tabulas arī nodrošina efektīvu vietas izmantošanu un ļauj vieglāk lasīt un salīdzināt sarežģītus datus.
Izmantojot CSS, varat veidot tabulas, lai tās būtu vizuāli pievilcīgākas. Tas var arī uzlabot jūsu vietnes vispārējo lietotāja pieredzi.
Mūsdienīgs vienrindu un kolonnu dizains
Varat pievienot vienkāršu tabulas dizainu ar atsevišķām rindām un kolonnām un bez sapludinātām šūnām. Tabulas stilizācija arī nodrošina, ka jūsu tīmekļa lapa ir saistoša lietotājam. Izņemot galda stilu, ir arī citi forši HTML efekti un CSS displeja vietņu izkārtojumi varat pievienot savai vietnei.
Jūs varat apskatīt šī vingrinājuma kodu tajā GitHub repo.
- Jaunā HTML failā pievienojiet pamata HTML koda struktūru:
html>
<html>
<galvu>
<virsraksts>Mans vienkāršais galdsvirsraksts>
galvu>
<ķermeni>
ķermeni>
html> - Pamattekstā pievienojiet tabulas atzīmes:
<tabula>
tabula> - HTML tabulas elementam ir jāietver tabulas rinda tagus katrai tabulas rindai. Augšējo rindu parasti izmanto virsrakstiem. Izmantot tabulas galvene HTML tagi, kas attēlo katru tabulas kolonnu:
<tr>
<th>1. galveneth>
<th>2. galveneth>
<th>3. galveneth>
tr> - Pievienojiet vairāk rindu zem galvenes rindas. Izmantot tabulas dati HTML tagi, lai pievienotu datus katrai tabulas šūnai:
<tr>
<td>1. rinda, 1. kolonnatd>
<td>1. rinda, 2. kolonnatd>
<td>1. rinda, 3. kolonnatd>
tr>
<tr>
<td>2. rinda, 1. kolonnatd>
<td>2. rinda, 2. kolonnatd>
<td>2. rinda, 3. kolonnatd>
tr>
<tr>
<td>3. rinda, 1. ailetd>
<td>3. rinda, 2. kolonnatd>
<td>3. rinda, 3. kolonnatd>
tr>
<tr>
<td>4. rinda, 1. ailetd>
<td>4. rinda, 2. kolonnatd>
<td>4. rinda, 3. ailetd>
tr>
<tr>
<td>5. rinda, 1. ailetd>
<td>5. rinda, 2. kolonnatd>
<td>5. rinda, 3. ailetd>
tr> - Pievienojiet stila atzīmi head tagā. Pievienojiet tabulai vispārīgu stilu, piemēram, ēnas, noapaļotus galda stūrus, fontus un piemales:
<stils>
tabula {
robeža-sabrukums: sabrukt;
platums: 100%;
krāsa: #333;
fontu ģimene: Arial, sans serif;
fonta izmērs: 14px;
teksta līdzināšana: pa kreisi;
robeža-rādiuss: 10px;
pārplūde: paslēptas;
kaste-ēna: 0 0 20pxrgba(0, 0, 0, 0.1);
starpība: auto;
margin-top: 50px;
piemale-apakšā: 50px;
}
stils> - Veidojiet tabulas galvenes stilu, lai piešķirtu tai fona krāsu un līdzinātu tekstu:
tabulath {
fona krāsa: #ff9800;
krāsa: #fff;
fonta svars: treknrakstā;
polsterējums: 10px;
teksta pārveidošana: lielie burti;
burtu atstarpes: 1px;
robeža-top: 1pxciets#fff;
robeža-apakša: 1pxciets#ccc;
} - Veidojiet tabulas rindu stilu, lai tās mainītu pelēkās un baltās krāsas un pievienotu efektu, virzot kursoru virs rindas:
tabulatr:n-tais bērns (pat)td {
fona krāsa: #f2f2f2;
}tabulatr:virziet kursorutd {
fona krāsa: #ffedcc;
} - Veidojiet datu stilu tabulas šūnās:
tabulatd {
fona krāsa: #fff;
polsterējums: 10px;
robeža-apakša: 1pxciets#ccc;
fonta svars: treknrakstā;
} - Atveriet HTML failu, lai skatītu tabulu tīmekļa pārlūkprogrammā:
Daudzrindu šūnu galda dizains
Dažās tabulās ir iekļautas kolonnas ar sapludinātām rindām, lai izveidotu daudzrindu šūnu.
- Noņemiet visas pašreizējās tabulas rindas, saglabājot tikai augšējo ar virsrakstiem:
<tabula>
<tr>
<th>1. galveneth>
<th>2. galveneth>
<th>3. galveneth>
tr>
tabula> - Izveidojiet daudzrindu šūnu, izmantojot atribūtu rowspan. Tādējādi šī šūna tiks paplašināta norādītajā rindu skaitā.
1. sadaļa
<tr>
<tdrindu platums="2">Daudzrindu šūnatd>
<td>1. rinda, 2. kolonnatd>
<td>1. rinda, 3. kolonnatd>
tr>
<tr>
<td>2. rinda, 2. kolonnatd>
<td>2. rinda, 3. kolonnatd>
tr> - Pievienojot citu daudzšūnu rindiņu ar citu rindu diapazona vērtību, pievienojiet atbilstošo skaitu tabulas rindas HTML tagi. Tas atbilst rindu augstumam vai skaitam, pāri kurām šūna atrodas. Piemēram, ja šūnas rindu diapazons ir 3, jums būs jāpievieno trīs rindas pārējām kolonnām, lai pareizi izlīdzinātu tabulu.
2. sadaļa
<tr>
<tdrindu platums="3">Daudzrindu šūnatd>
<td>3. rinda, 2. kolonnatd>
<td>3. rinda, 3. kolonnatd>
tr>
<tr>
<td>4. rinda, 2. kolonnatd>
<td>4. rinda, 3. ailetd>
tr>
<tr>
<td>5. rinda, 2. kolonnatd>
<td>5. rinda, 3. ailetd>
tr> - Atveriet HTML failu, lai skatītu tabulu tīmekļa pārlūkprogrammā:
Apvienotā rindu tabulas dizains
Līdzīgi kā daudzrindu šūnās, tabulās var būt arī rindas, kas tiek apvienotas vairākās kolonnās.
- Noņemiet visas pašreizējās tabulas rindas, saglabājot tikai augšējo ar virsrakstiem:
<tabula>
<tr>
<th>1. galveneth>
<th>2. galveneth>
<th>3. galveneth>
tr>
tabula> - Pievienojiet tabulai vairāk tabulas rindu. Izmantojiet atribūtu colspan, lai sapludinātu vienu no rindām 3 kolonnās:
1. sadaļa
<tr>
<tdstils="fona krāsa: #ffedcc"colspan="3">Q1td>
tr>
<tr>
<td>2. rinda, 1. kolonnatd>
<td>2. rinda, 2. kolonnatd>
<td>2. rinda, 3. kolonnatd>
tr>
<tr>
<td>3. rinda, 1. ailetd>
<td>3. rinda, 2. kolonnatd>
<td>3. rinda, 3. kolonnatd>
tr>
<tr>
<td>4. rinda, 1. ailetd>
<td>4. rinda, 2. kolonnatd>
<td>4. rinda, 3. ailetd>
tr> - Pievienojiet vēl vienu sapludinātu rindu, lai atdalītu tabulas sadaļas:
2. sadaļa
<tr>
<tdstils="fona krāsa: #ffedcc"colspan="3">Q2td>
tr>
<tr>
<td>6. rinda, 1. ailetd>
<td>6. rinda, 2. kolonnatd>
<td>6. rinda, 3. ailetd>
tr>
<tr>
<td>7. rinda, 1. ailetd>
<td>7. rinda, 2. ailetd>
<td>7. rinda, 3. ailetd>
tr>
<tr>
<td>8. rinda, 1. ailetd>
<td>8. rinda, 2. kolonnatd>
<td>8. rinda, 3. ailetd>
tr> - Atveriet HTML failu, lai skatītu tabulu tīmekļa pārlūkprogrammā:
Izmantojiet pievilcīgas tabulas, lai maksimāli izmantotu savus datus
HTML tabulas ir lielisks veids, kā jūsu vietnē parādīt strukturētus datus. Varat tos veidot, izmantojot CSS, lai uzlabotu noklusējuma izskatu. Tomēr pārliecinieties, ka neesat aizrāvies un izkārtojumam izmantojiet tabulas — pieejamības apsvērumu dēļ saglabājiet tās tikai datiem.
Lielāku tabulu izveide un atjaunināšana var būt darbietilpīga, it īpaši, ja izmantojat kolonnas un rindas, kas aptver. Varat uzrakstīt savu kodu, lai ģenerētu marķējumu, vai izmantot draudzīgākas sintakses, piemēram, Markdown.
