CSS naudojimas lentelės langelių užpildymui ir tarpams nustatyti

CSS naudojimas lentelės langelių užpildymui ir tarpams nustatyti
CSS naudojimas lentelės langelių užpildymui ir tarpams nustatyti
Lucas Simon
2024 m. birželio 30 d., sekmadienis 23:23:46

Stiliaus lentelės užpildymas ir tarpai naudojant CSS

HTML lentelėje atributai „cellpadding“ ir „cellspacing“ tradiciškai naudojami norint nustatyti tarpus lentelės langeliuose ir tarp jų. Tačiau tobulėjant žiniatinklio kūrimui, CSS naudojimas šiems stiliaus tikslams tampa vis labiau paplitęs, todėl pasiekiamas didesnis lankstumas ir valdymas.

Šiame straipsnyje nagrinėjama, kaip naudojant CSS atkartoti „cellpadding“ ir „cellspacing“ efektus. Suprasdami šiuos metodus, kūrėjai gali pasiekti labiau prižiūrimą ir keičiamo dydžio kodą, laikydamiesi šiuolaikinių žiniatinklio standartų.

komandą apibūdinimas
border-collapse: separate; Iš naujo nustato kraštinių sutraukimo ypatybę į numatytąją vertę, leidžiančią naudoti kraštinių tarpus.
border-spacing Nurodo atstumą tarp gretimų lentelės langelių kraštų.
padding Nustato užpildymą lentelės langeliuose, panašiai kaip HTML langelių užpildymo atributas.
querySelectorAll Parenka visus elementus, atitinkančius nurodytą (-us) CSS parinkiklį (-ius) dokumente.
forEach Kiekvienam masyvo elementui vieną kartą vykdo pateiktą funkciją, dažniausiai naudojamą su NodeList iš querySelectorAll.
style Gauna arba nustato elemento stiliaus atributą, leidžiantį dinamiškai atnaujinti CSS ypatybes naudojant „JavaScript“.

CSS diegimas lentelių užpildymui ir tarpams

Pirmajame scenarijuje naudojame pagrindinį HTML ir CSS, kad atkartotume poveikį cellpadding ir cellspacing atributai. Pagal nustatymą border-collapse į separate, užtikriname, kad lentelės langeliai nesusitrauktų į vieną kraštinę, o tai leidžia apibrėžti tarpą tarp langelių naudojant border-spacing nuosavybė. Tai prilygsta nustatymui cellspacing="1" HTML. Panašiai, padding nuosavybė viduje td ir th selektoriai imituoja cellpadding="1" atributą nustatydami 1 pikselio užpildymą kiekviename langelyje. Šis metodas yra paprastas būdas pasiekti norimą tarpą vien tik naudojant CSS, padidinant kodo lankstumą ir palaikymą.

Antrasis scenarijus demonstruoja dinaminį metodą, naudojant „JavaScript“ kartu su CSS. Apibrėžę pradinę lentelės struktūrą ir pagrindinį stilių HTML, naudojame JavaScript, kad dinamiškai koreguotų lentelės tarpus. The document.getElementById Funkcija naudojama norint pasirinkti lentelę pagal jos ID. Tada dedame stalą borderSpacing ypatybę į „1px“, kad būtų pasiektas toks pat efektas kaip ir cellspacing atributas. Toliau mes naudojame querySelectorAll norėdami pasirinkti visus td ir th lentelės elementai ir forEach metodas kartoti šiuos elementus, taikant 1 pikselį padding kiekvienam. Šis scenarijus parodo, kaip „JavaScript“ gali būti naudojamas siekiant pagerinti CSS funkcijas, leidžiant dinamiškai atnaujinti lentelės stilių, atsižvelgiant į konkrečias sąlygas arba vartotojo sąveiką.

Lentelės langelių užpildymo ir tarpų konvertavimas į CSS

Naudojant HTML ir CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: separate; /* Resets spacing */
      border-spacing: 1px; /* Equivalent to cellspacing="1" */
    }
    td, th {
      padding: 1px; /* Equivalent to cellpadding="1" */
    }
  </style>
</head>
<body>
  <table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </table>
</body>
</html>

Dinaminis būdas koreguoti lentelės užpildymą ir tarpus

Naudojant JavaScript ir CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: separate;
    }
    td, th {
      padding: 1px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </table>
  <script>
    const table = document.getElementById('myTable');
    table.style.borderSpacing = '1px';
    const cells = table.querySelectorAll('td, th');
    cells.forEach(cell => {
      cell.style.padding = '1px';
    });
  </script>
</body>
</html>

Pažangios lentelės formavimo su CSS metodais

Be pagrindinio užpildymo ir tarpų, CSS siūlo įvairius pažangius HTML lentelių stiliaus formavimo būdus. Viena iš tokių būdų yra pseudoklasių naudojimas :nth-child ir :nth-of-type konkrečių eilučių ar stulpelių stiliui sudaryti. Pavyzdžiui, naudojant tr:nth-child(even) gali pritaikyti stilius lygioms eilutėms, todėl galima naudoti alternatyvų eilučių šešėliavimą, kuris pagerina skaitomumą. Šis metodas ypač naudingas dideliems duomenų rinkiniams, kai vizualinis diferencijavimas yra labai svarbus. Kitas pažangus metodas apima naudojimą CSS Grid sukurti sudėtingus lentelių išdėstymus. Nors CSS tinklelis paprastai naudojamas išdėstymo tikslais, jis taip pat gali būti taikomas lentelės elementams, kad būtų galima tiksliai valdyti langelių, eilučių ir stulpelių padėtį ir tarpus.

Be to, derinant CSS perėjimus ir animacijas su lentelės stiliumi, galima žymiai pagerinti vartotojo patirtį. Taikant perėjimus prie hover efektus lentelės eilutėse ar langeliuose, galite sukurti interaktyvesnę ir vizualiai patrauklesnę lentelę. Pavyzdžiui, pridėjus nedidelį spalvos pasikeitimą arba mastelio keitimo efektą užvedus pelės žymeklį, naudotojai, sąveikaujantys su lentele, iš karto pateikiame grįžtamąjį ryšį. Be to, sverto panaudojimas media queries užtikrina, kad lentelės būtų reaguojančios ir pasiekiamos įvairiuose įrenginiuose. Naudodami medijos užklausas galite koreguoti lentelės išdėstymą, šrifto dydį ir langelio užpildymą pagal ekrano dydį, taip užtikrinant nuoseklią naudotojo patirtį staliniuose, planšetiniuose kompiuteriuose ir mobiliuosiuose įrenginiuose.

Dažni klausimai ir atsakymai apie lentelės stilių naudojant CSS

  1. Kaip lentelėje galiu taikyti alternatyvias eilučių spalvas?
  2. Naudokite tr:nth-child(even) arba tr:nth-child(odd) CSS, kad nustatytumėte alternatyvias eilutes ir jų stilių.
  3. Kaip padaryti lentelę reaguojančią naudojant CSS?
  4. Naudokite media queries koreguoti lentelės išdėstymą ir stilius pagal skirtingus ekrano dydžius.
  5. Kokia CSS tinklelio naudojimo lentelėms nauda?
  6. CSS tinklelis suteikia tikslią lentelės elementų padėties ir tarpų valdymą, todėl galima atlikti sudėtingesnius ir lankstesnius išdėstymus.
  7. Ar galiu pridėti pelės žymeklio efektų prie lentelės eilučių?
  8. Taip, galite naudoti :hover pseudoklasė, kad pritaikytų stilius, kai vartotojas užveda pelės žymeklį virš lentelės eilučių arba langelių.
  9. Kaip naudoti CSS, kad paryškinčiau konkretų stulpelį?
  10. Naudokite td:nth-child(column_number) norėdami nukreipti į konkretų lentelės stulpelį ir jo stilių.
  11. Kokie yra pseudoklasių su lentelėmis naudojimo pranašumai?
  12. Pseudo klasės patinka :nth-child ir :nth-of-type leisti taikyti tikslinį stilių, kad būtų lengviau pritaikyti konkrečius stilius tam tikroms eilutėms ar stulpeliams.
  13. Kaip pridėti animaciją į lentelės langelius?
  14. Naudokite CSS animations arba transitions sukurti dinaminius efektus lentelės langeliuose, pagerinančius vartotojo sąveiką.
  15. Ar galima sudaryti lentelės antraščių stilių kitaip nei likusioje lentelės dalyje?
  16. Taip, galite naudoti th parinkiklis, skirtas taikyti konkrečius stilius lentelės antraštėms ir atskirti jas nuo kitų lentelės langelių.

Paskutinės mintys apie CSS tarpų lentelėse

CSS naudojimas lentelės valdymui cellpadding ir cellspacing siūlo modernią ir efektyvią alternatyvą tradiciniams HTML atributams. Taikant CSS ypatybes, pvz border-spacing ir padding, galite pasiekti tuos pačius vaizdinius efektus naudodami didesnį lankstumą ir valdymą. Šis metodas pagerina jūsų kodo priežiūrą ir mastelį, užtikrinant, kad lentelės išliktų jautrios ir vizualiai patrauklios įvairiuose įrenginiuose ir ekrano dydžiuose.