Creare tabele HTML

Tabelele sunt elemente foarte utile pentru prezentarea de continut asezat pe raduri si coloane.

Creare tabele

Pentru a crea tabele in paginile web se foloseste elementul <table> ... </table> , acesta incadreaza alte patru sub-elemente, care alcatuiesc structura tabelului.

- Linia (randul) Tabelului <tr> ... </tr>
- Titlul Tabelului <th> ... </th>
- Celulele tabelului (formeaza coloanele) <td> ... </td>
- Sub-titlu tabelului <caption> ... </caption>

Randurile tabelului contin titlurile tabelului si elemente pentru coloanele tabelului.
Datele /continutul din tabel se adauga in cadrul <td>.
In cadrul elementelor <th> si <td> se pot adauga si alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini.

- In HTML5 se folosesc proprietati CSS pentru designul tabelului; vedeti tutorialul: Stilizare tabele HTML cu CSS.

Mai jos puteti vedea un exemplu de cod HTML pentru crearea unui tabel (Tag-ul <style> se adauga in zona <head> din pagina):

<style>
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td>linia 2- coloana 1</td>
 <td>linia 2- coloana 2</td>
</tr>
<tr>
 <td>linia 3- coloana 1</td>
 <td>linia 3- coloana 2</td>
</tr>
<tr>
 <td>linia 4- coloana 1</td>
 <td>linia 4- coloana 2</td>
</tr>
</table>

Sub-titlu tabelului

- Sub-titlu tabelului "caption" permite specificarea unei linii de text care va aparea deasupra sau sub tabel. Pozitioonarea se face cu proprietatea CSS "caption-side" care se aplica la tabel si se folosesc valorile: top (deasupra) bottom (jos)
Exemplu:

<table style='border:1px solid #000;caption-side:bottom;'>
<caption>Acesta este subtitlu caption.</caption>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td>linia 2- coloana 1</td>
 <td>linia 2- coloana 2</td>
</tr>
</table>

Unire celule

Cu urmatoarele proprietati se poate face ca o celula sa ocupe mai multe raduri si coloane.

- colspan - cat de multe coloane ale tabelului aceasta celula va inlocui
- rowspan - cat de multe randuri ale tabelului aceasta celula va inlocui

- In HTML5 designul randurilor si celulei tabelului se face cu proprietati CSS.

in urmatorul exemplu puteti vedea rezultatul folosirii atributelor: "colspan" "rowspan" si CSS pentru background-ul unei celule.

<style>
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td colspan="2">linia 2- coloana 1 si 2</td>
</tr>
<tr>
 <td rowspan="2">linia 3 si 4 - coloana 1</td>
 <td style="background:#adadff">linia 3- coloana 2 - colorat</td>
</tr>
<tr>
 <td>linia 4- coloana 2</td>
</tr>
</table>

<<-Harti de imagini -- Stilizare tabele HTML cu ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tip de <input> creaza o paleta de culori pentru selectare culoare?

type="text" type="color" type="date"

<input type="color" name="get_color" />

Care metoda CSS roteste elementul HTML la un anumit numar de grade?

scale() translate() rotate()

#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}

Click pe functia care returneaza numarul cel mai mare.

pow() min() max()

var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88

Ce functie previne ca un fisier sa fie inclus mai mult de o data intr-o pagina?

include() include_once() require()

include_once("un_fisier.php");

Care este traducerea corecta pentru: "Ahead of time"?

Peste timp La timp Inainte de vreme

Most people arrived ahead of time.
- Cei mai multi oameni au sosit inainte de vreme (prea devreme).

Indicati traducerea corecta a cuvantului "buenísimo"

mai bun mai putin bun extrem de bun

Este fruto es buenísimo.
- Acest fruct este extrem /nemaipomenit de bun.