Stilizare tabele HTML cu CSS

In HTML5 stilul, aspectul si pozitionarea tabelelor httml se face cu CSS.
- Modul de creare a tabelelor in html e prezentat in tutorialul: Creare tabele HTML.

Tag-ul <style> din exemplele prezentate aici se adauga in zona <head> din pagina.

Adaugare bordura la tabel

Bordura tabelului se adauga cu proprietatea css: border.
- Exemplu, bordura neagra la elementele <table>, <th> si <td>:

<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>
</table>

Veti observa ca in exemplu de sus tabelul are borduri duble deoarece elementele <table>, <th>, si <td> au borduri separate. Pentru a le uni intr-o singura bordura se aplica proprietatea: border-collapse: collapse; la tabel.
- Acelasi exemplu cu "border-collapse":

<style>
table {
 border-collapse: collapse;
}
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>
</table>

Pentru bordura doar in jurul tabelului se aplica "border" doar la <table>.

Lungimea si Latimea tabelului

Lungimea si Latimea tabelului se defineste cu proprietatile css: width respectiv height.
- Exemplu: Tabel cu lungimea 95% si inaltimea <th> de 40px:

<style>
table {
 border-collapse: collapse;
 width: 95%;
}
th {
 height: 40px;
}
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>
</table>

Alinierea in tabel

Alinierea pe orizontala a elementelor din tabel se face cu proprietatea text-align (poate lua valorile: left, right, center).
- In mod implicit, continutul din <th> este centrat.
Alinierea pe verticala in celulele din tabel se face cu proprietatea vertical-align (poate lua valorile: top, bottom, middle).

Pozitionarea tabelului pe mijloc se face aplicand valoarea "auto" la marginile stanga si dreapta la tabel: margin:5px auto;

- Exemplu: Tabel centrat, cu textul din <th> orizontal stanga (left) si continutul din <td> aliniat vertical jos (bottom):

<style>
table {
 border-collapse: collapse;
 margin:5px auto;
 width: 70%;
}
table, th, td {
 border: 1px solid #000;
}
th {
 text-align: left;
}
td {
 height: 45px;
 vertical-align: bottom;
}
</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>
</table>

Spatiu la celulele tabelului

Spatiu dintre celulele tabelului poate fi definit cu proprietatea border-spacing aplicata la tabel.
Spatiu dintre bordura si continutul din <td> poate fi modificat cu proprietatea padding aplicata la <th> si <td>.

- Exemplu: Spatiu dintre celule de 10px si padding 8px;

<style>
table {
 border-spacing:10px;
 margin:5px auto;
 width: 80%;
}
table, th, td {
 border: 1px solid #000;
}
th, td {
 padding: 8px;
}
</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>
</table>

Culoarea tabelului

Culoarea /fundalul la elementele din tabel se face cu proprietatea background. Aceasta poate fi aplicata la <table>, <tr>, <th> si <td>.
- Exemplu: background aplicat la <table>, <th> si <td>.

<style>
table {
 background: #a8a9e0;
 margin:5px auto;
 width: 290px;
}
table, th, td {
 border: 1px solid #000;
}
th {
 background: #4bac40;
 color: #fff;
}
td {
 background: #fff;
}
</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>
</table>

Culoare la randurile de tabel

Ca sa alternati culoarea randurilor, se aplica "background" la selectorul css nth-child() la <tr>.
Daca vreti ca randul pe care este mouse-ul sa fie evidentiat, se aplica selectorul hover.

- Exemplu:

<style>
table {
 border-collapse: collapse;
 margin:5px auto;
 width: 290px;
}
table, th, td {
 border: 1px solid #000;
}
tr:nth-child(even){
 background: #efefef;
}
tr:hover {
 background: #b8d8b8;
}
th {
 background: #bbbbf0;
}
</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>

<<-Creare tabele HTML -- Creare formulare->>

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

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