Motanel Tutorials


 
AcasaAcasa  RegulamentRegulament  FAQFAQ  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  

Creearea tabelelor


Navigare :: HTML (HyperText Markup Language)
AutorMesaj
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Creearea tabelelor Lun 31 Aug 2009 - 5:35
Aceste etichete au o mare utilizare deoarece tabelele constituie structura care stă la baza organizării marii majorităţi a paginilor web (inclusiv cea de faţă).

Tabelul este format din linii şi coloane împărţind zona în celule. Fiecare celulă păstrează informaţia care va fi afişată. Pentru o afişare corectă a tabelului, fiecare rând va avea acelaşi număr de celule. Dacă dorim ca o celulă să fie goală vom introduce un spaţiu gol (space) sau codul html echivalent  

Pentru inserarea unui tabel este folosită perechea de etichete <table> şi </table>, pentru un rând <tr> şi </tr> (table rows) iar pentru o celulă <td> şi </td> (table data cell) .

Tabele pot fi îmbricate, adică în interior pot conţine unul sau mai multe tabele.

Exemplu: tabel cu 2 coloane şi 2 rânduri, border 1, coloana 1 lăţime 80px, coloana 2 lăţime 160px, fiecare celulă are o altă culoare de fond (bgcolor)

Codul HTMLRezultatul codului
<table border="1">
<tr>
<td width="80" bgcolor="red">rosu</td>
<td width="160" bgcolor="yellow">galben</td>
</tr>
<tr>
<td bgcolor="white">alb</td>
<td bgcolor="green">verde</td>
</tr>
</table>
rosugalben
albverde

Atributele etichetei table sunt:
border = bordura (0 = lipsă bordura)
width = lăţimea tabelului
height = înălţimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiţi în loc style)
cellspacing = distanţa între celule
cellpaddind = distanţa dintre marginea celului şi conţinut
Atributele etichetei td sunt:
align = aliniere pe orizontală a conţinutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticală a conţinutului (top=sus, bottom=jos, middle=mijloc, baseline=asemănator cu top)
width = lăţimea celulei
height = înălţimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiţi în loc atributul style)
colspan = uneşte celula cu cea din dreapta ei
rowspan = uneşte celula cu cea de sub ea


Exemplu: un tabel în care am folosit colspan pentru a uni celulele 1 şi 2 din rândul 2 şi rowspan pentru a uni celula 1 din rândul 3 cu celula 1 din rândul 4:

Codul HTMLRezultatul codului
<table border="1">
<tr>
<td bgcolor="white">R1 C1</td>
<td bgcolor="yellow">R1 C2</td>
<td bgcolor="white">R1 C3</td>
<td bgcolor="yellow">R1 C4</td>
</tr>
<tr>
<td colspan="2" bgcolor="red">R2 C1+C2</td>
<td bgcolor="yellow">R2 C3</td>
<td bgcolor="red">R2 C4</td>
</tr>
<tr>
<td rowspan="2" bgcolor="white">R3 C1 + R4 C1</td>
<td bgcolor="yellow">R3 C2</td>
<td bgcolor="white">R3 C3</td>
<td bgcolor="yellow">R3 C4</td>
</tr>
<tr>
<td bgcolor="red">R4 C2</td>
<td bgcolor="yellow">R4 C3</td>
<td bgcolor="red">R4 C4</td>
</tr>
</table>
R1 C1R1 C2R1 C3R1 C4
R2 C1+C2R2 C3R2 C4
R3 C1 + R4 C1R3 C2R3 C3R3 C4
R4 C2R4 C3R4 C4

Dacă dorim să evidenţiem conţinutul primului rând (capul de tabel) putem folosi perechea de etichete <th> şi </th> (table header cell) în locul etichetelor <td> şi </td>. Astfel conţinutul celulei va fi afişat îngroşat şi aliniat pe mijloc.

Exemplu: un tabel cu 3 rânduri şi 2 coloane folosind pe primul rând etichetele <th> şi </th>:

Codul HTMLRezultatul codului
<table border="1">
<tr>
<th width="120">Titlul 1</th>
<th width="120">Titlul 2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Eticheta caption va adăuga o linie text deasupra tabelului, centrată pe mijloc, de obicei folosită ca fiind un titlu al tabelului. Caption se plasează obligatoriu imediat după tag-ul table dar înainte de prima etichetă tr.
Exemplu: un tabel cu 4 rânduri şi 2 coloane folosind eticheta caption:

Codul HTMLRezultatul codului
<table border="1">
<caption>Necesar alimente</caption>
<tr>
<th width="120">Produse</th>
<th width="120">Cantitate</th>
</tr>
<tr>
<td>Fructe</td>
<td>1 kg</td>
</tr>
<tr>
<td>Legume</td>
<td>5 kg</td>
</tr>
<tr>
<td>Carne</td>
<td>1,5 kg</td>
</tr>
</table>

Exemplu: tabelului anterior îi adăugăm o imagine de fundal folosind style în zona head:

<html>
<head>
<style type="text/css">
#fundal
{
background-image : url(poza.jpg);
}
</style>
</head>
<body>
<table border="1" id="fundal">
<caption>Necesar alimente</caption>
<tr>
<th width="120">Produse</th>
<th width="120">Cantitate</th>
</tr>
<tr>
<td>Fructe</td>
<td>1 kg</td>
</tr>
<tr>
<td>Legume</td>
<td>5 kg</td>
</tr>
<tr>
<td>Carne</td>
<td>1,5 kg</td>
</tr>
</table>
</body>
</html>


Ultima editare efectuata de catre Motanel in Mier 20 Ian 2010 - 1:40, editata de 2 ori
 Xenon
avatar
Rang: Membru - MT™


Vezi profilul utilizatorului
MesajSubiect: Re: Creearea tabelelor Mar 19 Ian 2010 - 22:14
nu mai merge :(
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Creearea tabelelor Mier 20 Ian 2010 - 1:39
Gata l-am reeditat
 bodo$oll
avatar
Rang: Membru - MT™


Vezi profilul utilizatorului
MesajSubiect: Re: Creearea tabelelor Mier 20 Ian 2010 - 2:03
bravo folositor acest tutorial
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Creearea tabelelor Mier 20 Ian 2010 - 2:19
bodo$oll: incearca sa nu faci spam si daca ai de comentat vrun topic fa-o in cazul in care ai ceva de zis sau chiar ai incercat sa faci la fel ca in acest tutorial, si nu de dragul de ati creste numarul de mesaje zambet.

Repet si este valabil tuturor membrilor: Comentati numai in cazul in care chiar aveti ceva de spus.
 Kr@nE
avatar
Rang: Membru - MT™

Respetarea regulilor 75%

Vezi profilul utilizatorului
MesajSubiect: Re: Creearea tabelelor Sam 5 Feb 2011 - 10:21
Frumos tutorial pentru incepatori
 Continut sponsorizat
Rang:


MesajSubiect: Re: Creearea tabelelor



Copyright © 2013 - Toate drepturile rezervate
Design creat si codat de Alexandru Miron si Stefan Patrascu