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

Care tag e folosit pentru a adauga liste cu definitii in element <dl>?

<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>

Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?

display position visibility

#id {
  visibility: hidden;
}

Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.

onclick onmouseover onfocus

document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}

Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.

$_SESSION $_GET $_REQUEST

if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}

Care din urmatoarele cuvinte reprezinta un Verb?

lighting believe path

I believe in my path.
- Eu cred in calea mea.