Korektně na slučované buňky tabulky v HTML

Na co pamatovat, když se rozhodnete v HTML slučovat buňky v tabulce.
Tabulky v HTML jsou základním stavebním kamenem pokročilejších stránek. Pokud používáte slučované buňky pomocí parametru COLSPAN, mějte na paměti některé záludné vlastnosti. Jestliže použijete COLSPAN na prvním řádku tabulky, nebudete moci korektně nastavit jednotlivé rozměry sloupců, respektive i když budete definovat šířku sloupců později, nemusí se vždy nastavit šířka sloupce, jak si představujete. Řekněme například, že chcete vytvořit zhruba takovouto tabulku:

XXXXXXXXX
XXXX

Problém je v tom, že většinou napíšete něco ve smyslu:

<table width="200" cellspacing="0" cellpadding="0">
<tr>
  <td bgcolor=green colspan=2>XXXX</td>
  <td bgcolor=yellow>XXXXX</td>
</tr>
<tr>
  <td bgcolor=red>XXXX</td>
  <td bgcolor=blue colspan=2>XXXX</td>
</tr>
</table>
Výsledek ovšem nebude jistě tím, co bychom očekávali:

XXXXXXXXX
XXXX

Jak jistě vidíte, někde se stala chyba. Konkrétně zcela zmizel prostřední sloupec, kde by se měly jednotlivé pruhy překrývat, v uvedeném HTML kódu ale není kde definovat šířku prostředního sloupce, proto si musíme pomoci přidáním dalšího řádku na začátek tabulky, který použitím průhledného obrázku stlačíme na velikost jednoho pixelu. Výsledný kód tedy bude vypadat takto:

<table width="200" cellspacing="0" cellpadding="0">
<tr>
  <td width=33%><img src="null.gif" width=1 height=1></td>
  <td width=33%><img src="null.gif" width=1 height=1></td>
  <td width=33%><img src="null.gif" width=1 height=1></td>
</tr>
<tr>
  <td bgcolor=green colspan=2>XXXX</td>
  <td bgcolor=yellow>XXXXX</td>
</tr>
<tr>
  <td bgcolor=red>XXXX</td>
  <td bgcolor=blue colspan=2>XXXX</td>
</tr>
</table>
Tabulka se tedy nijak co do velikosti nezměnila, dali jsme ale do pořádku definice šířek sloupců.
Diskuze (6) Další článek: Linkové telefony mají do roku 2005 skončit

Témata článku: Software, Programování, Green, Šířka, Buňka, Jednotlivá buňka, Yellow, Sloupec, Tab


Určitě si přečtěte

Šéf Spotify: Budeme zdražovat. Náš obsah se zlepšil
Markéta Mikešová
PředplatnéSpotify
Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

** Desktopový Linux funguje a vypadá stále lépe ** Fedora 33 není výjimkou ** Ve stínu Windows a macOS tu vyrostly skvělé alternativy

Jakub Čížek | 157

Jakub Čížek
FedoraOperační systémyLinux
Vybrali jsme 12 programovatelných hraček a stavebnic pro děti a jejich rodiče

Vybrali jsme 12 programovatelných hraček a stavebnic pro děti a jejich rodiče

** Získejte děti pro matematiku a základy techniky ** Kupte jim hračku nebo stavebnici, které vdechnou vlastní život ** Vybrali jsme stavebnice pro malé caparty i budoucí experty

Jakub Čížek | 10

Jakub Čížek
Stavebnice
CZ.NIC bezplatně naděluje USB/NFC klíče. Jak jej získat?
Lukáš Václavík
CZ.NICeGovernment
Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

** Obtěžují vás neustálé dotazy webů, zda chcete zobrazovat oznámení? ** Můžete je zakázat, a to jak kompletně, tak i pro jednotlivé stránky ** Připravili jsme návody pro Chrome, Firefox, Edge a Operu

Karel Kilián | 11

Karel Kilián
Jak na InternetTipyProhlížeče
Starlink podle betatesterů: Rychlejší a levnější než satelitní internet v Česku

Starlink podle betatesterů: Rychlejší a levnější než satelitní internet v Česku

** Reddit se začíná plnit zkušenostmi se Starlinkem ** Při přímé viditelnosti dá i 120 Mb/s ** Klasický satelitní internet už teď dalece překonává

Jakub Čížek | 48

Jakub Čížek
StarlinkPoskytovatelé internetu
Air Bank, Fio banka a MONETA zakládají alianci pro bankovní identitu
Jakub Čížek
BankaČeskoeGovernment

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5