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.


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

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag adauga rand nou in paragraf?
<b> <br> <p>
Prima linie ...<br>
Alta linie...
Ce proprietate CSS seteaza spatiu dintre litere?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
Ce functie obtine accesul la un element HTML cu un anumit ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Clic pe instructiunea "echo" utilizata corect.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Adresa URL: http://CoursesWeb.net";
Care din urmatoarele expresii cu "paint" (a picta) se foloseste pentru forma Negativa?
will paint not paint have painted
She does not paint that landscape.
- Ea nu picteaza acel peisaj.
Care din urmatoarele expresii cu "cantar" (a canta) se foloseste pentru propozitie Negativa?
ir a cantar cantaba no cantar
Ella no canta esa canciĆ³n.
- Ea nu canta acel cantec.
Creare tabele HTML

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (79453)
  2. Curs HTML gratuit Tutoriale HTML5 (45705)
  3. Substantivul din limba engleza - The Noun (30272)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (62589)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (45451)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (6208)
  2. Curs HTML gratuit Tutoriale HTML5 (5211)
  3. Curs si Tutoriale JavaScript (4597)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (4490)
  5. Curs CSS Online Tutoriale CSS3 (4334)