Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>stylování sloupců tabulky</title> <table border="1"> <caption>Stylování sloupců tabulky</caption> <tr> <td>tabulka první sloupec <td>tabulka druhý sloupec <td>tabulka třetí sloupec <tr> <td>tabulka první sloupec <td>tabulka druhý sloupec <td>tabulka třetí sloupec <tr> <td>tabulka první sloupec <td>tabulka druhý sloupec <td>tabulka třetí sloupec </table> <p>Podle CSS specifikace jde sloupcům tabulky deklarovat <a href="http://www.w3.org/TR/CSS2/tables.html#columns">pouze tyto vlastnosti</a>: border, background, width, visibility.</p> <p>Využitím pseudotřídy <code>:first-child</code> a selektoru přímého souseda lze toto omezení obejít a trochu se rozšoupnout.</p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
table { border-collapse: collapse; border: #000 solid 2px; margin: auto; min-width: 40em; width: 95%; background: #def; color: #000; font-family: sans-serif } td { padding: 3px 7px; border: #000 solid 1px; } td:first-child { /* 1. sloupec */ font-weight: bold; text-align: left /*možno vynechat */; } td:first-child+td { /* 2. sloupec */ text-align: center; } td:first-child+td+td { /* 3. sloupec */ font-weight: bold; font-style: italic; text-align: right; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>