Numatytosios HTML lentelės atrodo gana stulbinančiai – pagyvinkite jas keliais gerai atrodančiais CSS efektais.
Lentelės pridėjimas prie savo svetainės yra naudingas būdas aiškiai pateikti didelius informacijos kiekius. Lentelės taip pat efektyviai išnaudoja erdvę ir leidžia lengviau skaityti bei palyginti sudėtingus duomenis.
Naudodami CSS galite sukurti lenteles, kad jos būtų patrauklesnės. Tai taip pat gali pagerinti bendrą jūsų svetainės naudotojo patirtį.
Modernus vienos eilės ir stulpelių dizainas
Galite pridėti paprastą lentelės dizainą su atskiromis eilutėmis ir stulpeliais ir be sujungtų langelių. Lentelės stilius taip pat užtikrina, kad jūsų tinklalapis būtų patrauklus vartotojui. Be stalo stiliaus, yra ir kitų šaunūs HTML efektai ir CSS rodymo svetainių maketai galite pridėti prie savo svetainės.
Šio pratimo kodą galite peržiūrėti jame „GitHub“ atpirkimas.
- Naujame HTML faile pridėkite pagrindinę HTML kodo struktūrą:
html>
<html>
<galva>
<titulą>Mano paprastas stalastitulą>
galva>
<kūnas>
kūnas>
html> - Turinyje pridėkite lentelės žymas:
<stalo>
stalo> - HTML lentelės elemente turi būti lentelės eilutė kiekvienos lentelės eilutės žymos. Viršutinė eilutė dažniausiai naudojama antraštėms. Naudokite lentelės antraštė HTML žymos, žyminčios kiekvieną lentelės stulpelį:
<tr>
<th>1 antraštėth>
<th>2 antraštėth>
<th>3 antraštėth>
tr> - Po antraštės eilute pridėkite daugiau eilučių. Naudokite lentelės duomenys HTML žymos, skirtos duomenims įtraukti į kiekvieną lentelės langelį:
<tr>
<td>1 eilutė, 1 stulpelistd>
<td>1 eilutė, 2 stulpelistd>
<td>1 eilutė, 3 stulpelistd>
tr>
<tr>
<td>2 eilutė, 1 stulpelistd>
<td>2 eilutė, 2 stulpelistd>
<td>2 eilutė, 3 stulpelistd>
tr>
<tr>
<td>3 eilutė, 1 stulpelistd>
<td>3 eilutė, 2 stulpelistd>
<td>3 eilutė, 3 stulpelistd>
tr>
<tr>
<td>4 eilutė, 1 stulpelistd>
<td>4 eilutė, 2 stulpelistd>
<td>4 eilutė, 3 stulpelistd>
tr>
<tr>
<td>5 eilutė, 1 stulpelistd>
<td>5 eilutė, 2 stulpelistd>
<td>5 eilutė, 3 stulpelistd>
tr> - Pridėkite stiliaus žymą ant galvos žymos. Pridėkite bendrą lentelės stilių, pvz., šešėlius, suapvalintus stalo kampus, šriftus ir paraštes:
<stilius>
stalo {
siena-griūtis: griūtis;
plotis: 100%;
spalva: #333;
šrifto šeima: Arial, be serifo;
šrifto dydis: 14px;
teksto lygiavimas: paliko;
pasienio spindulys: 10px;
perpildymas: paslėptas;
dėžutė-šešėlis: 0 0 20pxrgba(0, 0, 0, 0.1);
marža: automatinis;
paraštė-viršus: 50px;
paraštė-apačia: 50px;
}
stilius> - Sukurkite lentelės antraštės stilių, kad suteiktumėte jai fono spalvą ir sulygiuotą tekstą:
staloth {
fono spalva: #ff9800;
spalva: #fff;
šrifto svoris: drąsus;
kamšalas: 10px;
teksto transformacija: didžiosiomis raidėmis;
tarpai tarp raidžių: 1px;
riba-viršus: 1pxkietas#fff;
kraštinė-apačia: 1pxkietas#ccc;
} - Sukurkite lentelės eilučių stilių, kad pilkos ir baltos spalvos keistųsi ir pridėtumėte efektą užvedus pelės žymeklį virš eilutės:
stalotr:n-tas vaikas (net)td {
fono spalva: #f2f2f2;
}stalotr:užveskite pelės žymeklįtd {
fono spalva: #ffedcc;
} - Stilizuokite duomenis lentelės langeliuose:
stalotd {
fono spalva: #fff;
kamšalas: 10px;
kraštinė-apačia: 1pxkietas#ccc;
šrifto svoris: drąsus;
} - Norėdami peržiūrėti lentelę žiniatinklio naršyklėje, atidarykite HTML failą:
Kelių linijų langelių lentelės dizainas
Kai kuriose lentelėse yra stulpelių su sujungtomis eilutėmis, kad būtų sudarytas kelių eilučių langelis.
- Pašalinkite visas esamas lentelės eilutes, palikdami tik viršutinę su antraštėmis:
<stalo>
<tr>
<th>1 antraštėth>
<th>2 antraštėth>
<th>3 antraštėth>
tr>
stalo> - Sukurkite kelių eilučių langelį naudodami atributą rowspan. Tai išplės tą langelį per nurodytą eilučių skaičių.
1 skyrius
<tr>
<tdeilių ilgis="2">Kelių eilučių ląstelėtd>
<td>1 eilutė, 2 stulpelistd>
<td>1 eilutė, 3 stulpelistd>
tr>
<tr>
<td>2 eilutė, 2 stulpelistd>
<td>2 eilutė, 3 stulpelistd>
tr> - Pridėdami kitą kelių langelių eilutę su kita eilučių intervalo reikšme, pridėkite atitinkamą skaičių lentelės eilutės HTML žymės. Tai turi atitikti langelio eilučių aukštį arba skaičių. Pavyzdžiui, jei langelio eilučių ilgis yra 3, prie kitų stulpelių turėsite pridėti tris eilutes, kad lentelė būtų tinkamai sulygiuota.
2 skyrius
<tr>
<tdeilių ilgis="3">Kelių eilučių ląstelėtd>
<td>3 eilutė, 2 stulpelistd>
<td>3 eilutė, 3 stulpelistd>
tr>
<tr>
<td>4 eilutė, 2 stulpelistd>
<td>4 eilutė, 3 stulpelistd>
tr>
<tr>
<td>5 eilutė, 2 stulpelistd>
<td>5 eilutė, 3 stulpelistd>
tr> - Norėdami peržiūrėti lentelę žiniatinklio naršyklėje, atidarykite HTML failą:
Sujungtas eilučių lentelės dizainas
Panašiai kaip ir kelių eilučių langeliuose, lentelėse taip pat gali būti eilučių, kurios susilieja keliuose stulpeliuose.
- Pašalinkite visas esamas lentelės eilutes, palikdami tik viršutinę su antraštėmis:
<stalo>
<tr>
<th>1 antraštėth>
<th>2 antraštėth>
<th>3 antraštėth>
tr>
stalo> - Pridėkite daugiau lentelės eilučių prie lentelės. Norėdami sujungti vieną iš eilučių per 3 stulpelius, naudokite atributą colspan:
1 skyrius
<tr>
<tdstilius="fono spalva: #ffedcc"colspan="3">Q1td>
tr>
<tr>
<td>2 eilutė, 1 stulpelistd>
<td>2 eilutė, 2 stulpelistd>
<td>2 eilutė, 3 stulpelistd>
tr>
<tr>
<td>3 eilutė, 1 stulpelistd>
<td>3 eilutė, 2 stulpelistd>
<td>3 eilutė, 3 stulpelistd>
tr>
<tr>
<td>4 eilutė, 1 stulpelistd>
<td>4 eilutė, 2 stulpelistd>
<td>4 eilutė, 3 stulpelistd>
tr> - Pridėkite kitą sujungtą eilutę, kad atskirtumėte lentelės dalis:
2 skyrius
<tr>
<tdstilius="fono spalva: #ffedcc"colspan="3">Q2td>
tr>
<tr>
<td>6 eilutė, 1 stulpelistd>
<td>6 eilutė, 2 stulpelistd>
<td>6 eilutė, 3 stulpelistd>
tr>
<tr>
<td>7 eilutė, 1 stulpelistd>
<td>7 eilutė, 2 stulpelistd>
<td>7 eilutė, 3 stulpelistd>
tr>
<tr>
<td>8 eilutė, 1 stulpelistd>
<td>8 eilutė, 2 stulpelistd>
<td>8 eilutė, 3 stulpelistd>
tr> - Norėdami peržiūrėti lentelę žiniatinklio naršyklėje, atidarykite HTML failą:
Naudokite patrauklias lenteles, kad išnaudotumėte visas savo duomenų galimybes
HTML lentelės yra puikus būdas pateikti struktūrinius duomenis jūsų svetainėje. Galite formuoti juos naudodami CSS, kad pagerintumėte numatytąją išvaizdą. Tačiau įsitikinkite, kad nesijaudinkite ir išdėstydami naudokite lenteles – dėl prieinamumo jas laikykite tik duomenims.
Didesnių lentelių kūrimas ir atnaujinimas gali būti sudėtingas, ypač jei naudojate stulpelius ir eilutes. Galite parašyti savo kodą, kad sugeneruotumėte žymėjimą, arba pasinaudoti draugiškesnėmis sintaksėmis, pvz., Markdown.
