Începeți să creați tabele simple în HTML

Tabelele HTML sunt de departe una dintre cele mai bune declarații HTML create vreodată. Abilitatea de a formata o pagină web cu declarații de tabel este uimitoare! Învață-le, folosește-le și iubește-le!

Tabele de bază:

Să luăm lista de cumpărături pe care am folosit-o în tutorialul de listă și să o transformăm într-un tabel de data aceasta. Vom plasa articolele în prima coloană și prețurile în a doua coloană.

Acesta este codul care a făcut-o să se întâmple. Codul de fapt este în stânga și descrierea în limba engleză este în dreapta. Descrierea este indentată pentru a arăta „structura” declarației tabelului.

Confuz? Ok, să aruncăm o privire la tabelul de mai sus. Acest tabel este de fapt destul de simplu. Construiți tabele în același mod în care citiți o carte; de la stânga la dreapta și de sus în jos. Tabelul începe cu o etichetă <table> și se termină cu o etichetă </table> . Fiecare rând începe cu o etichetă <tr> și se termină cu o etichetă </tr> . Fiecare porțiune de date din tabel începe cu o etichetă <td> și se termină cu o etichetă </td> .

Dar asta nu e o masă, zici tu! Nu are granita! De fapt, este o masă. Este un tabel fără chenar sau BORDER="0" . Acest concept este foarte important atunci când doriți să utilizați instrucțiunile TABLE pentru a vă formata paginile web. Nu vrei întotdeauna o chenar groasă. Ok, deci haideți să facem un tabel cu un BORDER de data aceasta.

Singura diferență dintre acest tabel și cel precedent este declarația <table> care arată ca următorul.

<chenarul tabelului="7″>

Destul de ușor, nu? Mărimea marginii este reprezentată în pixeli. Ok, acum să obținem puțin mai mult CELLSPACING . Aceasta este distanța dintre celulele tabelului nostru. De asemenea, vă puteți gândi la aceasta ca la grosimea peretelui dintre celulele tabelului.

Asta arată mult mai bine. Poți vedea diferența? Din nou, singura modificare este în instrucțiunea <table> care arată ca următorul.

<table border="7″ cellspacing="7″>

CELLSPACING , ca și BORDER , este de asemenea măsurat în pixeli. Dar, textul pare prea aproape de pereții mesei, spuneți! Ok, ok, putem remedia și asta. Se numește CELLPADDING . Este spațiul dintre conținutul celulei și marginile pereților celulei.

Ah, acum așa ți-ai dorit? Nu? Ei bine, a trebuit să exagerez un pic cifrele, dar asta a fost doar pentru a încerca să fac un punct. Sper că puteți vedea diferențele. Tabelul anterior a fost creat cu instrucțiunea <table> prezentată mai jos.

<table border=”7″ cellspacing=”7″ cellpadding=”7″>

Încadrarea imaginilor:

Acum vrem să intrăm în lucruri mai distractive. Încadrarea imaginilor este o modalitate excelentă de a vă îmbunătăți imaginile. Îi face să pară să iasă direct din pagină. Iată capodopera mea de 5 secunde.

O lucrare de artă destul de grozavă, chiar îmi face imaginea urâtă să arate bine. Iată codul care a făcut-o.

<table border="7″ alt="”>
<tr>
<td><img src="image.gif”></td>
</tr>
</tabel>

Etichetele <tr> și etichetele </tr> pot fi lăsate afară dacă doriți. În continuare va funcționa bine. Puriștii HTML vor argumenta probabil că aceste etichete trebuie să fie acolo. Dacă simți așa, așa cum o fac eu de obicei, atunci folosește-le.

Sau vă puteți încadra și imaginile cu text, așa cum se arată mai jos.

Netto, hu! Codul este prezentat mai jos.

<table border="7″ cellpadding="10″>
<tr>
<td><img src="image.gif” alt="”></td>
<td>Ce<br>capodopera!</td>
</tr>
</tabel>

Mai am o notă despre încadrarea imaginilor. Dacă aveți probleme la centrarea imaginii, încercați următoarele.

<td align="center”><img src="image.gif”></td>

Legături de încadrare:

De asemenea, puteți pune linkuri în interiorul unui tabel. De fapt, puteți pune întreaga pagină într-o grămadă de comenzi de tabel dacă doriți și folosind BORDER="0″ , nimeni nu ar putea spune cu adevărat. De ce ai vrea să faci asta, te întrebi? Pentru formatarea imaginilor și a textului împreună pe pagina dvs.; gandeste-te la asta. Ok, înapoi la încadrarea linkului.

Iată codul care a făcut-o.

<table border="7″ cellpadding="10″>
<tr>
<td><a href="http://www.google.com/”>Google.com</a></td>
<td><a href="http://www.yahoo.com/”>Yahoo!</a></td>
</tr>
<tr>
<td><a href="http://www.jjwdesign.com/”>JJW Design</a></td>
<td><a href="http://www.iproundup.com/”>Rezumat IP</a></td>
</tr>
</tabel>

Ei bine, sper că v-a plăcut această mică secțiune din declarația <table> . Există mult mai multe lucruri pe care le puteți face cu instrucțiunea <table> decât ceea ce este posibil în acest tutorial. Totuși, sper că acest lucru a ajutat.

Link către acest tutorial!

Ți s-a părut util acest tutorial? Dacă da, vă rog să mă ajutați să-l împărtășesc altora prin link-ul către el. Doar plasați codul HTML de mai jos pe propria pagină Web pentru a crea un link către acest tutorial.