Bine ati venit pe forumul de suport al Forumgratuit

Pentru a beneficia de tot ceea ce va ofera forumul nostru, va rugam sa va conectati daca sunteti deja membru sau sa va alaturati comunitatii noastre



Creati un forum gratuit ca acesta.

Personalizare forum si mesaje folosind tabele

 :: Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Personalizare forum si mesaje folosind tabele

Mesaj Scris de ezlidor la data de Sam 26 Feb 2011, 2:15 am

Personalizare forum si mesaje folosind tabele

Toti dorim sa avem site-uri reusite si cat mai originale ( ... sau, mai bine spus, unii dintre noi), dar cati dintre noi stiu ca pentru a avea un site cat mai bine structurat si un template cat mai reusit, totul se bazeaza pe tabele, combinatii de tabele. In prima parte a acestui tutorial am sa va explic cum sa creati un tabel si de ce taguri aveti nevoie pentru a va crea tabelul dorit pentru pagini html, iar in a doua parte cum sa adaugati un tabel intr-un mesaj, folosind aceleasi taguri.

Am sa incep prin a va oferi un exemplu, in prima imagine veti vedea site-ul, iar in imaginile mai mici veti vedea tabelele din care este format. Ce e cu rosu e un tabel, ce e cu galben, e o celula de tabel. Adevarul e ca unele tabele pe care le-am marcat pot fi eliminate si continutul sau poate fi adaugat folosind alte taguri, dar pentru a se pastra forma site-ului, se recomanda a nu se elimina tabelele.


Apasa pe imagine pentru a o mari


Tabel 01

Tabel 02

Tabel 03

Tabel 04

Tabel 05

Tabel 06

Tabel 07

Tabel 08

Tabel 09

Tabel 10

Tabel 11

Tabel 12


Like a Star @ heaven Informatii generale
Tabelele sunt foarte importante pentru o pagina html. Pe langa crearea propriu-zisa a lor, ele pot fi folosite pentru a oferi o stabilitate paginii, forma dorita si controlarea elementelor din cadrul tabelelor, astfel nu vom permite ca anumite elemente sa "paraseasca" locul lor.

Like a Star @ heaven Crearea unui tabel
Pentru a crea un tabel trebuie sa combinam o serii de taguri: <table> , <th> , <tr> , <td> , <caption> , <colgroup> , <col /> , <thead> , <tbody> , <tfoot>

Tagul <table> defineste un tabel HTML. Poate fi combinat cu celelalte taguri enumerate mai sus, dar e obligatoriu sa se foloseasca tagurile <tr> si <td>.
Tagul <th> defineste un antet de tabel
Tagul <tr> defineste un rand nou in tabel
Tagul <td> defineste o celula noua in tabel

Exemplu:
Cod:
<table border="1">
<tr>
<td>Continut 1</td>
<td>Continut 2</td>
</tr>
<tr>
<td>Continut 3</td>
<td>Continut 4</td>
</tr>
</table>

Continut 1Continut 2
Continut 3Continut 4


Tagul <caption> defineste o legenda. Se adauga imediat dupa tagul <table> si va fi centrata deasupra tabelului.

Exemplu:
Cod:
<table border="1">
<caption>ForumGratuit.ro</caption>
<tr>
<td>Continut</td>
<td>Continut</td>
</tr>
<tr>
<td>Continut</td>
<td>Continut</td>
</tr>
</table>

ForumGratuit.ro

ContinutContinut
ContinutContinut


Tagul <colgroup> este folosit pentru a formata in acelasi timp toate celulele de pe o anumita coloana.

Exemplu:
Cod:
<table border="1">
<colgroup width="100px" align="left"></colgroup>
<colgroup width="150px" align="center"></colgroup>
<colgroup width="80px" align="right"></colgroup>
<tr>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
</tr>
<tr>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
</tr>
<tr>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
</tr>
</table>

Continut
Continut
Continut
Continut
Continut
Continut
Continut
Continut
Continut


Tagul <col /> are functie asemanatoare cu tagul <colgroup>

Tagurile <thead> , <tbody> , <tfoot> definesc continutul unui rand intreg, fara a fi nevoie de a adauga stiluri pentru toate celulele din cadrul acelui rand. <thead> va defini in totdeauna celulele de pe primul rand, <tfoot> va defini in totdeauna celulele de pe ultimul rand, iar <tbody> va defini celelalte randuri.
Pentru a adauga aceste taguri in tabel e necesar sa adaugati si stil in pagina css sau in header.

Exemplu:
Cod:
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;}
tfoot {color:red}
</style>
</head>

<body>
<table border="1">
<tr>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
</tr>
<tr>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
</tr>
<tr>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
<td>Continut</td>
</tr>
</table>
</body>

ContinutContinutContinut
ContinutContinutContinut
ContinutContinutContinut
ContinutContinutContinut
ContinutContinutContinut
ContinutContinutContinut


Like a Star @ heaven Bordura tabel
Cu ajutorul bordurii vom stabili granitele celulelor si a tabelului. Atat tabelul cat si fiecare celula va detine propriile borduri.
Pentru a mari in grosime bordura tabelului trebuie folost codul border="X" in tagul <table>, unde x trebuie completat cu un numar, definind grosimea bordurii in pixeli. Definind valoarea " 0 " (zero), fara a adauga codul pentru fiecare celula, tabelul nu va contine nici o bordura, se va vedea doar continutul.

Exemplu:
Cod:
<table border="0">
<tr>
<td>Continut 1</td>
<td>Continut 2</td>
</tr>
<tr>
<td>Continut 3</td>
<td>Continut 4</td>
</tr>
</table>

Continut 1Continut 2
Continut 3Continut 4


Definirea silului unei borduri
Daca doriti sa va personalizati tabelul, puteti s-o faceti si prin stilul bordurii (linie continua, punctata, ...). Pentru a defini bordura, va sfatuiesc sa o definiti prin css, pe langa faptul ca nu e nevoie sa repetati codul in fiecare pagina, continutul paginii va fi mult mai mic si mai usor de modificat.
Daca doriti ca toate tabelele sa aiba acelasi stil, adaugati urmatorul cod in css:
Cod:
table {
border-style: ----- ;
}


Daca doriti ca fiecare tabel sa aiba stil personalizat, adaugati urmatorul cod in css:
Cod:
table.table1 {
border-style: ----- ;
}
table.table2 {
border-style: ----- ;
}
... si definiti in tagurile <table> clasa table1 si table2
Cod:
<table border="0" class="table1">
<tr>
<td>Continut 1</td>
<td>Continut 2</td>
</tr>
<tr>
<td>Continut 3</td>
<td>Continut 4</td>
</tr>
</table>


<table border="0" class="table2">
<tr>
<td>Continut 1</td>
<td>Continut 2</td>
</tr>
<tr>
<td>Continut 3</td>
<td>Continut 4</td>
</tr>
</table>


Inlocuiti ----- din cadul css cu una din urmatoarele taguri:
* none - defineste tabel fara bordura (daca adaugati acest cod, nu mai este nevoie sa adaugati codul border="0' in cadrul codului html
* hidden - sterge bordura tabelului, dar se vad bordurile celulelor
* dotted - linie punctata
* dashed - defineste linie punctata (ca la banda punctata de pe sosea)
* solid - defineste linie continua
* double - defineste linie solida, dubla

Like a Star @ heaven Inaltimea si latimea tabelelor / celulelor
Pentru latime folositi codul width, iar pentru inaltime folositi codul hight
Daca adaugati codul in tagul <table>, veti defini latimea / inaltimea tabelului, celulele devenind egale ca latime / inaltime.
Exemplu:
Cod:
<table width="200">
<tr>
<td>Continut 1</td>
<td>Continut 2</td>
</tr>
<tr>
<td>Continut 3</td>
<td>Continut 4</td>
</tr>
</table>

Continut 1Continut 2
Continut 3Continut 4


Daca adaugi codul in tagul <td>, vei defini latimea / inaltimea celulei, tabelul capatand dimensiunea in functie de valorile trecute la inaltime si latime
Cod:
<table>
<tr>
<td width="200">Continut 1</td>
<td width="300">Continut 2</td>
</tr>
<tr>
<td width="200">Continut 3</td>
<td width="300">Continut 4</td>
</tr>
</table>


Like a Star @ heaven Background
Tagul background defineste culoarea si imaginea de fundal a tabelului sau a unei celule.
Tagul poate fi trecut in css sau in codul html al tabelului.

Culoare de fundal
In css, pentru a defini culoarea de fundal, trebuie sa adaugati urmatorul cod:
Cod:
bgcolor="COD CULOARE"

Acelasi cod se adauga si in cadul html:
Exemplu:
Cod:
<table bgcolor="#0f0888">
<tr>
<td>Continut 1</td>
<td>Continut 2</td>
</tr>
<tr>
<td>Continut 3</td>
<td>Continut 4</td>
</tr>
</table>

Continut 1Continut 2
Continut 3Continut 4

Puteti defini o culoare de fundal pentru fiecare celula, adaugand codul in cadrul tagului <td>
Exemplu:
Cod:
<table>
<tr>
<td bgcolor="#0f0888">Continut 1</td>
<td bgcolor="#ff0000">Continut 2</td>
</tr>
<tr>
<td bgcolor="#ff0888">Continut 3</td>
<td bgcolor="#888888">Continut 4</td>
</tr>
</table>

Continut 1Continut 2
Continut 3Continut 4

In css trebuie sa specificam celula care dorim s-o definim, iar in codul html trebuie sa specificam clasa
Cod:
td.celula1 {
bgcolor="#888000"
}

Cod:
...
<td class="celula1">
...


Imagine de fundal
In css, pentru a defini o imagine de fundal, trebuie folosit codul de mai jos:
Cod:
background-image:url('LINK IMAGINE');

Daca in codul css nu se specifica modul de repetare a imaginii, acesta se va repeta atat pe axa X cat si pe axa Y.
Pentru repetarea imaginii doar pe axa X, se va adauga codul:
Cod:
background-repeat: repeat-x;

Pentru repetarea imaginii doar pe axa Y, se va adauga codul:
Cod:
background-repeat: repeat-y;

Daca doriti ca imaginii sa nu se repete, se va adauga codul:
Cod:
background-repeat: no-repeat;


In cadrul codului HTML, se va folosi urmatorul cod:
Cod:
<table background="LINK IMAGINE"> - pentru a defini imagine de fundal pe intregul tabel

sau

<TD background="LINK IMAGINE"> - pentru a defini imagine de fundal doar pentru o celula


Pentru repetarea imaginilor, se vor folosi aceleasi coduri de la css, adaugandu-le imediat dupa tagul ce defineste imaginea de fundal


Like a Star @ heaven Alinierea tabelului
Pentru codul css, daca doriti sa aveti aceiasi aliniere pentru toate tabelele, adaugati codul:
Cod:
table {
align: center;
}


Daca aveti mai multe tabele si doriti sa aiba stiluri diferite de aliniere, definiti pentru fiecare o clasa.
Cod:
table.table1 {
align: ----- ;
}
table.table2 {
align: ----- ;
}
... si definiti in tagurile <table> clasa table1 si table2
Cod:
<table class="table1">
<tr>
<td>Continut 1</td>
<td>Continut 2</td>
</tr>
<tr>
<td>Continut 3</td>
<td>Continut 4</td>
</tr>
</table>


<table class="table2">
<tr>
<td>Continut 1</td>
<td>Continut 2</td>
</tr>
<tr>
<td>Continut 3</td>
<td>Continut 4</td>
</tr>
</table>


Inlocuiti ----- din cadrul tagului align cu:
* center - tabelul se va positiona central
* left - tabelul se va alinia la stanga
* right - tabelul se ma alinia la dreapta

RECOMANDARE
Pentru o pagina html, va sfatuim ca tot continutul sa-l adaugati intr-un tabel aliniat central.

Pentru a defini pozitionarea tabelului prin cod html, folositi codul:
Cod:
<table align="center">
...

<table align="left">
...

<table align="right">
...



Tutorial realizat de ezlidor

Numai bine,
Echipa Forumgratuit
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.
Forumurile ce vor copia sau reproduc aceste tutoriale vor fi sterse fara preaviz!

ezlidor
Veteran Forumgratuit
Veteran Forumgratuit

Numarul mesajelor: 11523
Varsta: 23
Localizare: Iasi
Data de inscriere: 07/02/2008
Niciun warn

http://help.forumgratuit.ro

Sus In jos

Re: Personalizare forum si mesaje folosind tabele

Mesaj Scris de ezlidor la data de Sam 26 Feb 2011, 2:19 am

Personalizare forum si mesaje folosind tabele

Cum putem adauga un tabel intr-un mesaj de pe forum, folosind coduri BBcode ? In aceasta parte a acestui tutorial o sa va arat cum sa va personalizati anuntuirle / mesajele pe forumurile voastre.
Apasa pe spoiler pentru a vedea codul


FORUMGRATUIT.ro


FORUMGRATUIT.ro
Spoiler:
Cod:
[table cellspacing=0 style="table-layout:fixed; width: 100%;"][tr][td width=15 height=15 style="border: 0px; background-image: url('http://i259.photobucket.com/albums/hh310/_7udor_/1%20Orasul/01.png'); background-repeat: no-repeat;"][/td][td style="border: 0px; background: url('http://i259.photobucket.com/albums/hh310/_7udor_/1%20Orasul/02.png'); background-repeat: repeat-x;"][/td][td width=15 height=15 style="border: 0px; background-image: url('http://i259.photobucket.com/albums/hh310/_7udor_/1%20Orasul/03.png'); background-repeat: no-repeat;"][/td][/tr][/table][table cellspacing=0 style="table-layout:fixed; width: 100%;"][tr][td width=15 style="border: 0px; background-image: url('http://i259.photobucket.com/albums/hh310/_7udor_/1%20Orasul/08.png'); background-repeat: repeat-y;"][/td][td style=" padding: 15px; border: 0px; background-color: #E1EBF2;"][center][url=http://forumgratuit.ro][size=25][b][u]FORUMGRATUIT.ro[/u][/b][/size][/url]


FORUMGRATUIT.ro[/center][/td][td width=15 style="border: 0px; background-image: url('http://i259.photobucket.com/albums/hh310/_7udor_/1%20Orasul/04.png'); background-repeat: repeat-y;"][/td][/tr][/table][table cellspacing=0 style="table-layout:fixed; width: 100%;"][tr][td width=15 style="border: 0px; background-image: url('http://i259.photobucket.com/albums/hh310/_7udor_/1%20Orasul/07.png'); background-repeat: no-repeat;"][/td][td style="border: 0px; background: url('http://i259.photobucket.com/albums/hh310/_7udor_/1%20Orasul/06.png'); background-repeat: repeat-x;"][/td][td width=15 height=15 style="border: 0px; background-image: url('http://i259.photobucket.com/albums/hh310/_7udor_/1%20Orasul/05.png'); background-repeat: no-repeat;"][/td][/tr][/table]


FORUMGRATUIT.ro

FORUMGRATUIT.ro
Spoiler:
Cod:
[table cellspacing=0 style="table-layout:fixed; width: 100%;"][tr][td width=272 height=80 style="border-left: 2px solid #93B716; border-right: 2px solid #93B716; border-bottom: 0px; border-top: 2px solid #93B716; background-image: url('http://i259.photobucket.com/albums/hh310/_7udor_/zz-ORASUL/img001.png'); background-repeat: no-repeat;"][center][size=25][b][u][url=http://forumgratuit.ro][color=#60780B]FORUMGRATUIT.ro[/color][/url][/u][/b][/size][/center][/td][td style="background-color: #; border-bottom: 2px solid #93B716; padding-bottom: 15px;"][/td][/tr][/table][table cellspacing=0 style="border-left: 2px solid #93B716; border-right: 2px solid #93B716; border-bottom: 2px solid #93B716; border-top: 0px; table-layout:fixed; width: 100%;"][tr][td style="padding: 15px; background-color: #D8E47F;"]
FORUMGRATUIT.ro[/td][/tr][/table]


Ceea ce v-am oferit sunt 2 modele create de mine, insa voi va puteti creea propriul tabel ... cum? tinand cont de cele de mai jos.

Pentru inceput trebuie sa creati un tabel (ceea ce creez eu mai jos e un model)
Cod:
[table]
[tr]
[td] [/td][td] [/td]
[/tr][tr]
[td] [/td][td] [/td]
[/tr]
[/table]
ATENTIE, codul nu trebuie sa contina tagul border="0"

Dupa ce am creat tabelul, vom elimina spatiul dintre celule adaugand codul cellspacing=0
Cod:
[table cellspacing=0]
...

... si vom adauga stilul tabelului
Cod:
style="table-layout:fixed; width: 100%;"
Cod:
[table cellspacing=0 style="table-layout:fixed; width: 100%;"]
...
Modificati valoarea 100% daca doriti ca tabelul dvs. sa fie mai ingust.

Urmatorul pas e acela de a defini marimea si stilul fiecarei celule.
Marimea celulei o stabilim folosind tagurile width si height
Cod:
...
[td width=272 height=80]
...


Definirea stilului.
Pentru fiecare celula va trebuii sa definiti bordurile si fundalul celulei.

Bordura
Daca doriti ca intreaga celula ca aiba aceiasi culoare, grosime, stil, folositi codul:
Cod:
border: Xpx solid #XXXXXX;

Unde:
* Xpx - defineste grosimea bordurii - modificati X cu valoarea dorita
Daca nu doriti afisarea unei forduri, setati valoarea 0.
* solid - defineste stitlul. Vezi in tutorialul de mai sus toate valorile pe care puteti sa le folositi
* #XXXXXX - defineste culoarea bordurii - modifica XXXXXX cu codul hexadecimal dorit.

Daca dortiti sa persnalizati mordurile separat, inlocuiti border cu una din valorile:
border-left (bordura stanga), border-right (bordura dreapta), border-bottom (bordura jos), border-top (bordura sus)

Dupa definirea bordurilor putem trece la stabilirea culorii sau imaginii de fundal folosind codurile de mai jos.
Cod:
background-color: #XXXXXX;
background-image: url('LINK IMAGINE');

In primul mesaj gasiti cum puteti seta repatarea imaginii de background.

Cod:
[td width=200 height=100 style="border-left: 2px solid #000000; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #000000; background-color: #ffffff; background-image: url('LINK'); background-repeat: no-repeat;"]


Repetati codul petru fiecare celula.

Felicitari! Ati reusit!

Tutorial realizat de ezlidor

Numai bine,
Echipa Forumgratuit
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.
Forumurile ce vor copia sau reproduc aceste tutoriale vor fi sterse fara preaviz!

ezlidor
Veteran Forumgratuit
Veteran Forumgratuit

Numarul mesajelor: 11523
Varsta: 23
Localizare: Iasi
Data de inscriere: 07/02/2008
Niciun warn

http://help.forumgratuit.ro

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

 :: Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum