Lentelė yra esminis HTML komponentas, rodantis duomenis struktūrizuotu formatu su eilutėmis ir stulpeliais. HTML formatu lentelės kuriamos naudojant žymes <table>, <tr> ir <td>.
Žyma <table> žymi pagrindinį lentelės konteinerį, kuriame yra visos eilutės ir stulpeliai. Eilutės apibrėžiamos naudojant žymą <tr>(lentelės eilutė), o langeliai eilutėse apibrėžiami naudojant <td>(lentelės duomenys) žymą. Be to, galite naudoti žymą <th>(lentelės antraštė), kad apibrėžtumėte lentelės antraštės langelius.
Galite naudoti atributus, pvz., colspan ir rowspan, norėdami sujungti langelius lentelėje arba išplėsti langelius keliose eilutėse ir stulpeliuose. Be to, galite pritaikyti CSS ypatybes, kad tinkintumėte lentelės išvaizdą ir išdėstymą.
Lentelė( <table>)
- <table> Elementas naudojamas kuriant lentelę HTML.
- Duomenys dedami į eilutes( <tr>) ir stulpelius( <td> arba <th>).
- Kiekvienas duomenų langelis dedamas į <td>(duomenų langelį) arba <th>(antraštės langelį) elementus.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Stulpelio antraštė( <th>)
- <th> Elementas naudojamas lentelės stulpelių antraštėms kurti.
- Paprastai dedamas pirmoje lentelės eilutėje.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Duomenų eilutės( <tr>):
- <tr> Elementas naudojamas duomenų eilutėms kurti lentelėje.
– Duomenų langeliai( <td>) arba antraštės langeliai( <th>) dedami šiuose <tr> elementuose.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Stulpelio apimtis( colspan)
Atributas colspan naudojamas nustatyti stulpelių, kuriuos lentelėje apims duomenų langelis arba antraštės langelis, skaičių.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Eilučių išplėtimas( rowspan)
Atributas rowspan naudojamas nustatyti eilučių skaičių, kurį lentelėje apims duomenų langelis arba antraštės langelis.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Ląstelių sujungimas( colspan ir rowspan)
Norėdami sujungti langelius lentelėje, galite derinti abu colspan ir atributus. rowspan
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border nuosavybė
- border Savybė nurodo lentelės kraštinės storį.
– reikšmė border yra neneigiamas sveikasis skaičius.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding nuosavybė
-, cellpadding Ypatybė nurodo atstumą tarp langelio turinio ir langelio kraštinės lentelėje.
– reikšmė cellpadding yra neneigiamas sveikasis skaičius
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing nuosavybė
- cellspacing Ypatybė nurodo atstumą tarp langelių lentelėje.
– reikšmė cellspacing yra neneigiamas sveikasis skaičius.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Šie atributai ir elementai leidžia kurti ir tinkinti lenteles HTML pagal savo poreikius. Galite juos naudoti norėdami aiškiai ir tvarkingai pateikti duomenis savo svetainėje.