Diskuze: Jak vycentrovat tabulku a označit sloupec

HTML a CSS HTML a CSS Jak vycentrovat tabulku a označit sloupec American English version English version

Avatar
Ondřej Nováček:

Ahojky.
Chtěl bych se zeptat jak mám HTML vycentrovat tabulku a jak v něm označit sloupec (tagem).
Díky.

 
Odpovědět 22. dubna 13:57
Avatar
Noko
Redaktor
Avatar
Noko:

Ahoj,
tabulku vycentruješ tak, že tagu <table> přidáš align="center", takže

<table align="center">

A to s tím označeným sloupcem nechápu.

 
Nahoru Odpovědět  -6 22. dubna 14:35
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Noko
Tomáš123:

Tabuľku ide centrovať aj pomocou margin: auto v CSS. Atribútov určujúcich vzhľad by sa v HTML malo vyskytovať čo najmenej.

Nahoru Odpovědět  +1 23. dubna 18:00
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Noko
Redaktor
Avatar
Odpovídá na Tomáš123
Noko:

Já si taky myslím že vzhled by se měl určovat v CSS, margin: auto bych použil kdyby používal centrovanou tabulku často, nebo nedejbože tabulkový layout. Zato když použije tabulku jen občas tak podle mě align="center" nijak moc nevadí.
(Něco jiného je <center> ten jsem dříve používal a dodnes se za to stydím)

 
Nahoru Odpovědět  -4 23. dubna 20:16
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Noko
Tomáš123:

Ono ide práve o snahu oddeliť vzhľad od obsahu. Neformálne a prakticky je tvoje riešenie pre jeden prvok rovnako funkčné ako použitie marginu.

Za čistejšie riešenie ale považujem nastaviť triedu a požadované vlastnosti deklarovať v CSS. Triedu môžeš neskôr nastaviť aj iným tabuľkám (či prvkom) a v prípade potreby vzhľad zmeniť na jednom riadku v CSS.

Formálne je atribút align zastaraný rovnako ako značka <center>.

Nahoru Odpovědět 24. dubna 16:16
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Noko
Redaktor
Avatar
Odpovídá na Tomáš123
Noko:

Máš pravdu, můj problém je v tom, že když jsem se učil HTML tak jsem byl líný naučit se CSS a některé špatné zvyky mi zůstaly.

 
Nahoru Odpovědět 24. dubna 18:44
Avatar
Václav Černý:

Pro vycentrování tabulky určitě použij CSS. Nejjednodušší způsob je použití vlastnosti margin a nastavení odsazení levého a pravého okraje na stejné automatické hodnoty.

table {
  margin: 0px auto;
}

Pro podporu starších prohlížečů je nutné, jak bývá zvykem, si pomoci vlastností text-align.

.centered {
  text-align: center;
}

table {
  margin: 0px auto;
  text-align: left;
}

<div class="centered">
  <table>
        ...
  </table>
</div>

Popřípadě můžeš div s třídou centered vynechat a vlastnost text-align použít na tag body.

Pokud chceš, aby se šířka tabulky procentuálně přizpůsobovala, řešení by mohlo být následující.

table {
  width: 80%;
  margin: 0% 10%;
}

A označit sloupec můžeš jednoduchým selektorem. Dá se říci, že jednička v tomto případě značí číslo sloupce.

table tr td:nth-child(1) {
  ...
}
Editováno 24. dubna 19:28
Nahoru Odpovědět  +1 24. dubna 19:27
Nezávislý český vývojářský tým - www.luvastudio.cz
Avatar
Václav Černý:

Ještě bych doplnil, že pokud se jedná o vycentrování tabulky v HTML e-mailu, je použití atributu align="center" na místě.

Nahoru Odpovědět 24. dubna 19:35
Nezávislý český vývojářský tým - www.luvastudio.cz
Avatar
Ondřej Nováček:

Za všechno díky. Ten sloupec bych chtěl oznacit nějakým tagem, třeba jako se označuje článek article atd.

 
Nahoru Odpovědět 24. dubna 19:38
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Ondřej Nováček
Tomáš123:

Existuje HTML značka <col> (http://jecas.cz/html-tabulky#col). Nejde ňou ale meniť každý aspekt vzhľadu... Na djpw sa to nedávno riešilo (http://diskuse.jakpsatweb.cz/?…).

V prípade potreby obšírnejšieho štýlovania ide konkrétny stĺpec zamerať cez selektor priameho súrodenca. V prípade, že tabuľka obsahuje aj pospájané bunky môže byť celkom oriešok zamerať požadovaný stĺpec v každom riadku...

Nahoru Odpovědět 24. dubna 20:10
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Ondřej Nováček
Václav Černý:

Sloupec žádným tagem neoznačíš. Můžeš tak maximálně označit příslušné buňky atributem class, respektive přidat jim třídu a tím budeš mít dá se říci označený sloupec. Jinak to nejde a jinak to ani není potřeba.

Editováno 24. dubna 20:13
Nahoru Odpovědět  +1 24. dubna 20:11
Nezávislý český vývojářský tým - www.luvastudio.cz
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.