Tabelele HTML permit autorilor web s? aranjeze date precum text, imagini, link-uri, alte tabele etc. īn rānduri ?i coloane de celule.
Tabelele HTML sunt create folosind eticheta <table> īn care eticheta
<tr> este utilizat? pentru a crea rānduri de tabel? ?i
<td> tag este utilizat? pentru a crea celule de date.
Elementele de sub <td> sunt regulate ?i se las? aliniate īn mod implicit.
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Cum sa adaugati Tabelele HTML?</title>
</head>
<body>
<table>
<tr>
<td>Orban</td>
<td>Victor</td>
<td>55</td>
</tr>
<tr>
<td>Eva</td>
<td>Magdalena</td>
<td>44</td>
</tr>
</table>
</body>
</html>
Not?: Elementele <td> sunt containerele de date din tabel. Pot con?ine tot felul de elemente HTML; text, imagini, liste, alte tabele etc.
HTML Table - Adding a Border
Tabel HTML - Ad?ugarea unui chenar
Dac? nu specifica?i un chenar pentru tabel, acesta va fi afi?at f?r? margini.
Un chenar este setat fara chenar CSS:
Exemplu 2:
<!DOCTYPE html>
<html>
<head>
<title>Cum sa adaugati chenar Tabelelor HTML?</title>
</head>
<body>
<table border = "2">
<tr>
<td>Orban</td>
<td>Victor</td>
<td>55</td>
</tr>
<tr>
<td>Eva</td>
<td>Magdalena</td>
<td>44</td>
</tr>
</table>
</body>
</html>
Nota: Aici, chenarul este un atribut al etichetei <table> ?i este utilizat pentru a pune un chenar pe toate celulele. Dac? nu ave?i nevoie de margine, atunci pute?i utiliza border = "0".
Adaugare Titlu tabelelor HTML
Titlul tabelului poate fi definit folosind eticheta <th>.
Aceast? etichet? va fi pus? pentru a īnlocui eticheta <td>, care este utilizat? pentru a reprezenta celula de date real?.
Īn mod normal, ve?i pune rāndul superior ca titlu de tabel, a?a cum se arat? mai jos, altfel pute?i utiliza elementul
<th> īn orice rānd. Titlurile, care sunt definite īn etichet?
<th> sunt centrate ?i bolduite īn mod implicit.
Exemplu 3:
<!DOCTYPE html>
<html>
<head>
<title>Cum sa adaugati Titlu tabelelor HTML?</title>
</head>
<body>
<table border = "2">
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Varsta</th>
</tr>
<tr>
<td>Orban</td>
<td>Victor</td>
<td>55</td>
</tr>
<tr>
<td>Eva</td>
<td>Magdalena</td>
<td>44</td>
</tr>
</table>
</body>
</html>
Adaugare Cellpadding and Cellspacing Tabelelor HTML
Exist? dou? atribute numite Cellpadding and Cellspacing pe care le ve?i folosi pentru a regla spa?iul alb din celulele tabelului.
Atributul Cellspacing define?te spa?iul dintre celulele tabelului, īn timp ceCellpadding reprezint? distan?a dintre marginile celulelor ?i con?inutul unei celule.
Exemplu 4:
<!DOCTYPE html>
<html>
<head>
<title>Cum sa adaugati Cellpadding and Cellspacing Tabelelor HTML?</title>
</head>
<body>
<table border = "2" cellpadding = "5" cellspacing = "5">
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Varsta</th>
</tr>
<tr>
<td>Orban</td>
<td>Victor</td>
<td>55</td>
</tr>
<tr>
<td>Eva</td>
<td>Magdalena</td>
<td>44</td>
</tr>
</table>
</body>
</html>
Colspan ?i Rowspan Tabelelor HTML
Ve?i folosi atributul colspan dac? dori?i s? īmbina?i dou? sau mai multe coloane īntr-o singur? coloan?. Īn mod similar, ve?i utiliza intervale de rānd dac? dori?i s? īmbina?i dou? sau mai multe rānduri.
Exemplu 5:
<!DOCTYPE html>
<html>
<head>
<title>Cum sa adaugati Colspan ?i Rowspan Tabelelor HTML?</title>
</head>
<body>
<table border = "2" cellpadding = "5" cellspacing = "5">
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Varsta</th>
</tr>
<tr>
<td rowspan = "2">Orban</td>
<td>Victor</td>
<td>55</td>
</tr>
<tr>
<td>Magdalena</td>
<td>44</td>
</tr>
<tr>
<td colspan = "3">3vile si 4 apartamente</td>
</tr>
</table>
</body>
</html>
Tables Backgrounds
Tablouri Fundaluri
Pute?i seta fundalul tabelului folosind una dintre urm?toarele dou? moduri -
bgcolor atribut - Pute?i seta culoarea de fundal pentru īntreaga tabel? sau doar pentru o singur? celul?.
background atribut - Pute?i seta imaginea de fundal pentru īntreaga tabel? sau doar pentru o singur? celul?.
Pute?i seta, de asemenea, culoarea fundalului folosind atributul bordercolor.
Exemplu 6:
<!DOCTYPE html>
<html>
<head>
<title>Cum sa adaugati Fundaluri in HTML?</title>
</head>
<body>
<table border = "2" cellpadding = "5" cellspacing = "5"
bordercolor = "red" bgcolor = "yellow">
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Varsta</th>
</tr>
<tr>
<td rowspan = "2">Orban</td>
<td>Victor</td>
<td>55</td>
</tr>
<tr>
<td>Magdalena</td>
<td>44</td>
</tr>
<tr>
<td colspan = "3">3vile si 4 apartamente</td>
</tr>
</table>
</body>
</html>
Not? - Atributele bgcolor, background si bordercolor sunt dep??ite īn HTML5. Nu folosi?i aceste atribute.
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.