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
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Creare tabele HTML

Last accessed pages

  1. Trecutul simplu si continuu - Past Tense Simple and Continuous (42658)
  2. Curs CSS Online Tutoriale CSS3 (7296)
  3. Download carti electronice si programe pentru Limba Engleza (18812)
  4. Prezentul simplu - Exercitii si teste incepatori (22476)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (70030)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2349)
  2. Curs HTML gratuit Tutoriale HTML5 (1688)
  3. Curs si Tutoriale JavaScript (1648)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1603)
  5. Curs CSS Online Tutoriale CSS3 (1485)