En tabell är en viktig komponent i HTML för att visa data i ett strukturerat format med rader och kolumner. I HTML skapas tabeller med taggarna <table>, <tr> och <td>.
Taggen <table> representerar huvudtabellbehållaren, som innehåller alla rader och kolumner. Rader definieras med taggen <tr>(tabellrad), medan celler inom raderna definieras med taggen <td>(tabelldata). Dessutom kan du använda taggen <th>(tabellhuvud) för att definiera rubrikceller för tabellen.
Du kan använda attribut som colspan och rowspan för att slå samman celler i tabellen eller spänna över celler över flera rader och kolumner. Dessutom kan du använda CSS-egenskaper för att anpassa utseendet och layouten för tabellen.
Tabell( <table>)
- <table> Elementet används för att skapa en tabell i HTML.
- Data placeras i rader( <tr>) och kolumner( <td> eller <th>).
- Varje datacell placeras inom <td>(datacell) eller <th>(huvudcell) element.
<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>
Kolumnrubrik( <th>)
- Elementet <th> används för att skapa kolumnrubriker i en tabell.
- Vanligtvis placerad i den första raden i tabellen.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Datarader( <tr>):
- Elementet <tr> används för att skapa datarader i en tabell.
- Dataceller( <td>) eller rubrikceller( <th>) placeras inom dessa <tr> element.
<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>
Kolumnspaning( colspan)
Attributet colspan används för att bestämma antalet kolumner som en datacell eller rubrikcell spänner över i tabellen.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Radspaning( rowspan)
Attributet rowspan används för att bestämma antalet rader som en datacell eller rubrikcell kommer att sträcka sig över i tabellen.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Slår ihop celler( colspan och rowspan)
Du kan kombinera både colspan och rowspan attribut för att slå samman celler i en tabell.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border fast egendom
- border Egenskapen anger tjockleken på bordskanten.
- Värdet på border är ett icke-negativt heltal.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding fast egendom
-, cellpadding Egenskapen anger avståndet mellan cellinnehållet och kanten på cellen i tabellen.
- Värdet på cellpadding är ett icke-negativt heltal
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing fast egendom
- cellspacing Egenskapen anger avståndet mellan cellerna i tabellen.
- Värdet på cellspacing är ett icke-negativt heltal.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Dessa attribut och element låter dig skapa och anpassa tabeller i HTML efter dina behov. Du kan använda dem för att visa data på ett tydligt och organiserat sätt på din webbplats.