Curs Html

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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Stilizare tabele HTML cu CSS

Last accessed pages

  1. Jokes - Glume, Bancuri, Humor (2) (5894)
  2. Adjective (1806)
  3. Titluri, Paragrafe, Un nou rand, Linie orizontala (17444)
  4. Faptele bune ale omului, din suflet sau stiinta (1494)
  5. Joc exersare Spaniola (2552)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2787)
  2. Curs HTML gratuit Tutoriale HTML5 (1889)
  3. Curs si Tutoriale JavaScript (1786)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1731)
  5. Curs CSS Online Tutoriale CSS3 (1609)