Lucru cu tabele

Tabelele sunt elemente foarte utile pentru asezarea si prezentarea continutului intr-o pagina web.

1. Crearea de tabele

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

Linia tabelului de obicei contine elementul pentru titlurile tabelului si elementul pentru coloanele tabelului.
In cadrul elementelor pentru titluri si coloanele tabelului se pot adauga si alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini
Mai jos puteti vedea un exemplu de cod HTML pentru crearea unui tabel:
<table border="1">
<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>
- In pagina web apare asa:
titlu 1 titlu 2
linia 2- coloana 1 linia 2- coloana 2
linia 3- coloana 1 linia 3- coloana 2
linia 4- coloana 1 linia 4- coloana 2

2. Atributele Tabelului


Sub-titlu tabelului
    - Sub-titlu tabelului "caption" permite specificarea unei linii de text care va aparea deasupra sau sub tabel, acest lucru este definit de atributul "align" care poate lua valorile: top (deasupra) bottom (jos)
Exemplu:
<table border="1" cellpadding="2">
<caption align="bottom">acesta este textul</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>
- In pagina web apare asa:
acesta este textul
titlu 1 titlu 2
linia 2- coloana 1 linia 2- coloana 2

3. Atributele specifice elementelor pentru titlu si coloane


in urmatorul exemplu puteti vedea rezultatul folosirii atributelor: "colspan" "rowspan" si "bgcolor"
<table border="1" cellpadding="2">
<caption align="bottom">acesta este textul</caption>
<tr>
    <th>titlu 1</th>
    <th>titlu 2</th>
</tr>
<tr>
    <td colspan="2">linia 2- coloana 1</td>
</tr>
<tr>
    <td rowspan="2">linia 3- coloana 1</td>
    <td>linia 3- coloana 2</td>
</tr>
<tr>
    <td bgcolor="#adadff">linia 4- coloana 2 - colorat</td>
</tr>
</table>
- In pagina web apare asa:
acesta este textul
titlu 1 titlu 2
linia 2- coloana 1
linia 3- coloana 1 linia 3- coloana 2
linia 4- coloana 2 - colorat

Exersati singuri si alte exemple de tabele, cu mai multe randuri si coloane.
Harti de imagini <<-- Anterior --- Urmator -->> Lucrul cu mai multe ...

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Lucrul cu Tabele - Tutoriale HTML