curs webdesign
Tabele în HTML Tabelele au o mare utilizare deoarece tabele constituie structura care stă la baza organizării marii majorităţi a paginilor web. 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 echivalent &nbsp;. Pentru inserarea unui tabel este folosită perechea de etichete <table> şi </table>, pentru un rând <tr> şi </tr> iar pentru o celulă <td> şi </td>. Exemplu: tabel cu 2 coloane şi 2 randuri, border 1, coloană 1 lăţime 80px, coloană 2 latime 160px, fiecare celulă are o altă culoare de fond (bgcolor) HTML
Afisare
<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>
Rosu Galben Alb Verde
Atributele etichetei table sunt: border = bordura (0 = lipsa bordura) width = latimea tabelului height = inaltimea tabelului bgcolor = culoarea de fundal background = imaginea de fundal (W3C invalid, folositi style) cellspacing = distanta intre celule cellpadding = distanta dintre marginea celulei si continut Atributele etichetei td sunt: align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru) valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc) width = latimea celulei height = inaltimea celulei bgcolor = culoarea de fundal background = imaginea de fundal (W3C invalid, folositi style) colspan = uneste celula cu cea din dreapta ei rowspan = uneste 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 HTML <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 C1 R1 C2 R1 C3 R1 C4 R2 C1+C2
1