Limbajul HTML - tabele

Tabelele permit afișarea informațiilor într-o formă organizată pe rânduri și coloane. Elementul <table> este unul dintre elementele HTML cu complexitate ridicată.

Orice tabel este compus din:

• un element <table>...</table> – acesta conține toate celelalte elemente care definesc tabelul;
• rânduri, definit prin elementul <tr> – table row;
• celule, definite prin elementul <td> – table data, o celulă oarecare a tabelului sau <th> – care definește o celulă care este antet (header) pentru un grup de celule.

Un tabel implicit

În exemplul următor se afișează un tabel cu parametri impliciți.

<p> Un paragraf inaintea tabelului</p>
<table>
    <tr>
        <th>Nume</th>
        <th>Prenume</th>
        <th>Nota</th>
    </tr>
    <tr>
        <td>Popescu</td>
        <td>Ionel</td>
        <td>7</td>
    </tr>
    <tr>
        <td>Vlad</td>
        <td>Gregoria</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Lipan</td>
        <td>Victoria</td>
        <td>10</td>
    </tr>
</table>
<p> Un paragraf dupa tabel.</p>

Un tabel formatat

Următorul tabel este formatat cu CSS:

<style>
	table, td, th {border: solid 1px gray;}
    table{ border-collapse: collapse; width: 100%;}
    th{background-color:lightgray;}
    tr:nth-child(even) td{color:red;}
</style>
<table>
    <tr>
        <th>Nume</th>
        <th>Prenume</th>
        <th>Nota</th>
    </tr>
    <tr>
        <td>Popescu</td>
        <td>Ionel</td>
        <td>7</td>
    </tr>
    <tr>
        <td>Vlad</td>
        <td>Gregoria</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Lipan</td>
        <td>Victoria</td>
        <td>10</td>
    </tr>
</table>

Câteva elemente/atribute utile

Elementele care se folosesc pentru inserarea tabelelor au numeroase atribute. Aici discutăm o mică parte a lor. Pentru detalii consultați următoarele reurse:

• elementul <table> – MDN
• elementul <tr> – MDN
• elementul <td> – MDN

Elementele thead, tbody, tfoot

Rândurile dintru tabel pot fi împărțite din punct de vedere semantic în trei categorii:

• rânduri antet ale tabelului – prin elementul <thead>
• rânduri care desemnează corpul tabelului – prin elementul <tbody>
• rânduri subsol ale tabelului – prin elementul <tfoot>

Aceste elemente fac parte din elementul <table> și conțin zero sau mai multe rânduri (<tr>). Înțelesul lor este pur semantic, dar pot fi folosite și pentru formatarea CSS:

<style>
	table, td, th {border: solid 1px gray;}
    table{ border-collapse: collapse; width: 100%;}
    thead tr{background-color: lightgray;}
    tbody tr{background-color: #55CCFF;}
    tfoot tr{background-color: #FFFF66;}
</style>
<table>
	<thead>
        <tr>
            <th>Nume</th>
            <th>Prenume</th>
            <th>Nota</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Popescu</td>
            <td>Ionel</td>
            <td>7</td>
        </tr>
        <tr>
            <td>Vlad</td>
            <td>Gregoria</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Lipan</td>
            <td>Victoria</td>
            <td>10</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td colspan="2">Media</td>
            <td>8.33</td>
        </tr>
    </tfoot>
</table>

Atributele colspan și rowspan

o, Aceste atribute se aplică celulelor (<td> și <th>) și stabilesc pe câte rânduri se extinde celula (atributul rowspan), respectiv pe câte cloane se extinde celula (atributul colspan).

<style>
	table, td{border: solid 1px gray;}
    table{ border-collapse: collapse; width: 100%;}
</style>
<table>
	<tr>
    	<td colspan="2"> 1 </td>
        <td colspan="2"> 2 </td>
    </tr>
    <tr>
    	<td rowspan="2"> 1 </td>
        <td rowspan="2" colspan="2"> 2 </td>
        <td> 3 </td>
    </tr>
    <tr>
    	<td> 1 </td>
    </tr>
    <tr>
    	<td colspan="4"> 1 </td>
    </tr>
</table>

Valorile implite ale atributelor rowspan și colspan sunt 1. Pentru colspan valorile mai mari decât 100 sunt considerate incorecte și redevin 1. Valorile rowspan egale cu 0 extind celula până la sfârșitul secțiunii de tabel din care face parte aceasta (secțiunile sunt definite de elementele <thead>, <tbody> și <tfoot>), iar valorile mai mari decât 65534 sunt reduse la 65534.

Alinierea celulelor

Conținutul unei celule (<td> sau <th>) poate fi aliniat pe orizontală și pe verticală. În acest scop putem folosi atributele align și valign, dar sunt învechite. Utilizarea lor nu este recomandată și se propune folosirea proprietăților CSS, astfel:

• alinierea pe orizontală se realizează prin intermediul proprietății CSS text-align, cu valorile left, right, center sau justify;
• alinierea pe verticală se realizează prin intermediul proprietății CSS vertical-align, cu valorile baseline, top, middle sau bottom;

<style>
	table, td{border: solid 1px gray;}
    td {padding:3px; text-align: center;  height:100px;}
    table{ border-collapse: separate; border-spacing: 3px;}
</style>
<table>
	<tr>
    	<td style="text-align: left; width:120px;"> left </td>
        <td style="text-align: center;"> center </td>
    </tr>
    <tr>
    	<td style="text-align: right;"> right </td>
        <td style="text-align: justify;"> O propozitie mai lunga, care se va intinde pe mai multe linii. </td>
    </tr>
</table>

<style>
	table, td{border: solid 1px gray;}
    td {padding:3px; height:100px;}
    table{ border-collapse: separate; border-spacing: 3px; width: 100%;}
</style>
<table>
	<tr>
    	<td style="vertical-align: baseline;"> baseline </td>
        <td style="vertical-align: top;"> top </td>
    	<td style="vertical-align: middle;"> middle </td>
        <td style="vertical-align: bottom;"> bottom </td>
    </tr>
</table>