Cum inserezi un tabel pe site

Ceva mai devreme vă spuneam pe un alt blog că Lidl și-a modificat orarul la toate magazinele din țară. Și vă dădeam acolo inclusiv copy/paste la comunicatul oficial, de la ei de pe site. Doar că anunțul de pe site-ul Lidl nu arată chiar ca în articolul meu. Mai precis, pe site la ei anunțul este pus într-un tabel. În acest articol vă voi spune pe scurt cum puteți pune și voi un tabel pe site, care să arate efectiv a tabel.

Soluția ne vine de la W3Schools și implică utilizarea unor taguri HTML (care se scriu între semnele < și >, adică mai mic și mai mare) corespunzătoare tabelelor. Un tag HTML se scrie între < și > și de obicei vine în pereche: <tag> la început și </tag> la sfârșit. Tagurile care ne interesează la un tabel simplu sunt:

• <table> și </table>, cu care începem și finalizăm tabelul;
  
• <tr> și </tr>, cu care începem și terminăm un rând din tabel;
• <th> și </th>, cu care începem și terminăm un header (prima linie din tabel, ca linie de titlu)
• <td> și </td>, cu care adăugăm date (o celulă sau o căsuță a tabelului)

Pentru ca aceste taguri să se activeze, e necesar să comutăm editorul de text în mod HTML. Cum se face asta depinde de platforma pe care se află blogul sau site-ul dvs. Sau, cu alte cuvinte, e necesar să edităm direct sursa HTML a paginii unde dorim să se vadă tabelul.

Să revenim la Lidl. Deoarece tabelul din anunțul celor de la Lidl nu are header, nu vom folosi tagul <th>. În schimb, le vom folosi pe celelalte trei, scriind în sursa paginii (sau în codul ei HTML) următoarele informații:

<table>
  <tr>
    <td>Luni - Sâmbătă</td>
    <td>Programul de funcționare <b>maxim va fi de 07:30 – 21:00</b> la nivel național</td>
  </tr>
  <tr>
    <td></td>
    <td>Magazinele care în prezent deschid <b>după ora 07:30</b>, respectiv închid <b>înainte de 21:00</b>, vor rămâne la programul existent</td>
  </tr>
  <tr>
    <td>Duminică</td>
    <td>Programul de funcționare <b>maxim va fi de 08:00 – 19:00</b></td>
  </tr>
  <tr>
    <td></td>
    <td>Magazinele care în prezent deschid <b>după ora 08:00</b>, respectiv închid <b>înainte de ora 19:00</b>, vor rămâne la programul existent</td>
  </tr>
</table>

Cu aceste editări, noul nostru tabel va arăta în felul următor:

Luni - Sâmbătă	Programul de funcționare maxim va fi de 07:30 – 21:00 la nivel național
	Magazinele care în prezent deschid după ora 07:30, respectiv închid înainte de 21:00, vor rămâne la programul existent
Duminică	Programul de funcționare maxim va fi de 08:00 – 19:00
	Magazinele care în prezent deschid după ora 08:00, respectiv închid înainte de ora 19:00, vor rămâne la programul existent

Desigur, felul cum este colorat acest tabel, marginile lui, aspectul vor depinde de stilul CSS al paginii respective. Cu alte cuvinte, textul din citatul de mai sus, copiat pe site-ul sau blogul dvs, va produce tot un tabel, dar care probabil va arăta mai mult sau mai puțin diferit de cel de aici.

Aspectul unui tabel (stilul CSS) se poate și el edita sau modifica, dar asta depășește scopul articolului de față.