Tabele v HTML: vodnik za ustvarjanje in oblikovanje tabel v HTML

Tabela je bistvena komponenta v HTML za prikaz podatkov v strukturirani obliki z vrsticami in stolpci. V HTML so tabele ustvarjene z oznakami <table>, <tr> in <td>.

Oznaka <table> predstavlja glavni vsebnik tabele, ki vsebuje vse vrstice in stolpce. Vrstice so definirane z oznako <tr>(vrstica tabele), celice znotraj vrstic pa z oznako <td>(podatki tabele). Poleg tega lahko uporabite oznako <th>(glava tabele), da določite celice glave za tabelo.

Atribute, kot sta colspan in rowspan, lahko uporabite za spajanje celic v tabeli ali razpenjanje celic v več vrsticah in stolpcih. Poleg tega lahko uporabite lastnosti CSS, da prilagodite videz in postavitev tabele.

Tabela( <table>)

- <table> Element se uporablja za ustvarjanje tabele v HTML.

- Podatki so postavljeni v vrstice( <tr>) in stolpce( <td> ali <th>).

- Vsaka podatkovna celica je postavljena znotraj elementov <td>(podatkovna celica) ali <th>(glavna celica).

<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>  

Glava stolpca( <th>)

- <th> Element se uporablja za ustvarjanje naslovov stolpcev v tabeli.

- Običajno v prvi vrstici tabele.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

Podatkovne vrstice( <tr>):

- <tr> Element se uporablja za ustvarjanje podatkovnih vrstic v tabeli.

- Podatkovne celice( <td>) ali celice glave( <th>) so postavljene znotraj teh <tr> elementov.

<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>  

Razpon stolpca( colspan)

Atribut colspan se uporablja za določanje števila stolpcev, ki jih bo zajemala podatkovna celica ali celica glave v tabeli.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

Razpon vrstic( rowspan)

Atribut rowspan se uporablja za določanje števila vrstic, ki jih bo zajemala podatkovna celica ali celica glave v tabeli.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

Spajanje celic( colspan in rowspan)

Kombinirate lahko oba atributa colspan in rowspan za spajanje celic v tabeli.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

border premoženje

- border Lastnost določa debelino roba tabele.

- Vrednost border je nenegativno celo število.

<table border="1">  
<!-- Table rows and columns -->  
</table>  

cellpadding premoženje

- ,The cellpadding property specifies the distance between the cell content and the border of the cell in the table.

- The value of cellpadding is a non-negative integer

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

cellspacing property

- The cellspacing property specifies the spacing between cells in the table.

- The value of cellspacing is a non-negative integer.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

These attributes and elements allow you to create and customize tables in HTML according to your needs. You can use them to display data in a clear and organized manner on your website.