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

Lucas Simon
2024 m. birželio 30 d., sekmadienis 23:23:46
CSS

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į ir atributai. Pagal nustatymą į separate, užtikriname, kad lentelės langeliai nesusitrauktų į vieną kraštinę, o tai leidžia apibrėžti tarpą tarp langelių naudojant nuosavybė. Tai prilygsta nustatymui HTML. Panašiai, nuosavybė viduje td ir selektoriai imituoja 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 Funkcija naudojama norint pasirinkti lentelę pagal jos ID. Tada dedame stalą ypatybę į „1px“, kad būtų pasiektas toks pat efektas kaip ir atributas. Toliau mes naudojame querySelectorAll norėdami pasirinkti visus ir lentelės elementai ir 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 ir konkrečių eilučių ar stulpelių stiliui sudaryti. Pavyzdžiui, naudojant 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 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 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.

  1. Kaip lentelėje galiu taikyti alternatyvias eilučių spalvas?
  2. Naudokite arba CSS, kad nustatytumėte alternatyvias eilutes ir jų stilių.
  3. Kaip padaryti lentelę reaguojančią naudojant CSS?
  4. Naudokite 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 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 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 ir 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 arba 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 parinkiklis, skirtas taikyti konkrečius stilius lentelės antraštėms ir atskirti jas nuo kitų lentelės langelių.

CSS naudojimas lentelės valdymui ir siūlo modernią ir efektyvią alternatyvą tradiciniams HTML atributams. Taikant CSS ypatybes, pvz 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.