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>
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span><p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :activea:hover {
font-weight: bold;
color: #00da01;
}Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)var num = 12.34567;
num = num.toFixed(2);
alert(num); // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.