Tabele v WordPressu

Ena izmed zadev, ki jih WordPressov urejevalnik še ne podpira v vizualnem načinu, so tudi tabele. To pa še ne pomeni, da se ne da v zapis na blogu vključiti tudi tabel in sicer neposredno v obliki HTML kode. In tabele so eden najpogosteje uporabljenih elementov jezika HTML, ne samo za prikaz običajnih tabelaričnih podatkov, ampak tudi za natančno pozicioniranje posameznih delov spletne strani tako, da je prikaz v vseh internet brskalnikih čim bolj podoben (v takih primerih običajno robovi tabele sploh niso vidni in bralec ne opazi, da gre dejansko za tabelo, ki določi postavitev strani).

Če poznamo opsini jezik HTML dovolj dobro, lahko tabelo enostavno napišemo, boljša in hitrejša varjanta pa je, da si pomagamo z eno izmed spletnih strani, ki to delo bistveno olajša in na koncu avtomatično generira ustrezno HTML kodo na podlagi podanih zahtev tabele (seveda je za isto nalogo (pre)dober tudi kakšen HTML WYSIWYG urejevalnik, kot je Adobe Dreamweaver).

Takih strani je na internetu več, za primer pa vzemimo HTML Table generator.

Določimo širino tabele (lahko v pikslih ali procentih, za primer recimo 400 pikslov), število vrstic in stolpcev (recimo tabela velikosti 3 x 3), razmik med besedilom in robom celice (cellpadding) ter razmik med celicami (cellspacing), izberemo željeno barvo ozadja celic (tu si lahko pri izbiri barv pomagamo z tabelo), ter debelino in barvo obrobe (če je debelina 0, je obroba tabele nevidna).

Sedaj kliknemo gumb Generate table in skopiramo (CTRL + C) vse besedilo v polju Code, ki je v bistvu tabela napisana v jeziku HTML. V WordPressu preklopimo pogled v urejevalniku iz načina Visual v HTML in prilepimo (CTRL + V) kodo na željeno mesto:

Ime Priimek Naslov
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

V načinu Visual lahko potem v celice pišemo besedilo, ali pa vstavimo sliko. Če želimo napredneje oblikovati tabelo, recimo spremeniti širino posameznega stolpca, spremeniti barvo ozadja za naslovno vrstico, združiti posamezne celice ali kaj podobnega, potem moramo zopet preklopiti v način urejevalnika HTML in tam na pravo mesto vpisati ročno ustrezno HTML kodo, za kar pa je potrebno vsaj osnovno poznavanje HTML ukazov za prikaz tabel.

Za primer recimo popravimo zgornjo tabelo tako, da bo širina prvih dveh stolpcev 100 pikslov, zadnjega pa 200 (skupaj torej še vedno 400) ter da je ozadje naslovne vrstice v drugi barvi:

Ime Priimek Naslov
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

Koda takšne tabele pa izgleda potem takole:

<table style=”background-color:yellow;” border=”1″ cellspacing=”1″ cellpadding=”1″ width=”400″>
<tbody>
<tr>
<td width=”100″ bgcolor=”green”><span style=”color: #800080;”><strong>Ime</strong></span></td>
<td width=”100″ bgcolor=”green”><span style=”color: #800080;”><strong>Priimek</strong></span></td>
<td width=”200″ bgcolor=”green”><span style=”color: #0000ff;”><strong>Naslov</strong></span></td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</tbody></table>

Glede na prvo tabelo, je tu pri definiciji vsake celice v prvi vrstici (ukaz TD) dodano še width=”100″ bgcolor=”green” (dodana koda je označena v drugi barvi), kar določi širino celotnega stolpca ter spremeni barvo ozadja celice.

Značke: , , ,

3 Responses to “Tabele v WordPressu”

  1. sparkica Says:

    Hm, tabele… tabele slej kot prej prinesejo sranje na stran, sploh če jih pišeš ročno 🙂 vsak, ki je kdaj izdeloval spletno stran s pomočjo tabel (layout in ostale brezveznosti), se zaveda blatne luknje, v katero lahko zagaziš z njimi. Previdno, previdno! 😛

    Lepo si se potrudil z opisom… le vijolična in zelena ne gresta skupaj 😆

  2. dronyx Says:

    Glede barvne kombinacije se povsem strinjam, zato sem nemudoma zadevo saniral.

  3. sparkica Says:

    U, lepo, da me še vsaj nekdo upošteva 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

Komentirate prijavljeni s svojim WordPress.com računom. Log Out / Spremeni )

Twitter picture

Komentirate prijavljeni s svojim Twitter računom. Log Out / Spremeni )

Facebook photo

Komentirate prijavljeni s svojim Facebook računom. Log Out / Spremeni )

Google+ photo

Komentirate prijavljeni s svojim Google+ računom. Log Out / Spremeni )

Connecting to %s


%d bloggers like this: