HTML-ben a <table> belül lévő <tr>-emnek hogy tudok stílust megadni? Lehetséges ez egyáltalán? Hogy szokták ezt csinálni?

Ennek elméletileg működnie kell, bár nem vagyok benne biztos.

HTML kód:

...

<table id="table1">

<tr id="tr1">

<td>123</td>

</tr>

</table>

...

CSS vagy style tag közé:

table#table1 tr#tr1{

/*Stíluskódok*/

}

<style type="text/css">

.sajat {border:1px solid black;}

.sajat td {background-color:blue;color:white}

</style>

<table class="sajat">

<tr>

<td>

aaa

</td>

<td>

nnn

</td>

</table>

Lehet. Ez pl a táblázat minden második sorát szürkére színezi.

tr:nth-child(even) {

background: #ccc;

}

Az alap html valóban nem sok formázást enged meg a tr tag-en:

[link]

De a html5-ben bejött pár, és ahogy fentebb említették a css csodákra képes :)

A css3 és html5 szabványokat már nem kérdés, hogy lehet-e használni.

Valóban az :nth-child() pseudot már minden böngésző megeszi így ajánlom, hogy használt ezt a táblázatoknál.

Tr-re egyébként azért nem szokás formázást rakni, mert minden böngésző máshogy rendereli ugyanis egységes tr boxmodel specifikáció sosem volt és vélhetőleg nem is lesz.

Ajánlataim a táblázatok formázásához ( CSS és nem inline formázás):

table {/* A teljes táblázatra érvényes */}

table th {/* Táblázat fejléc cellái */}

table td {/* Táblázat adat cellái */}

table tr:hover th{/* Táblázat fejléc cellái egy sorban, ha az egér fölötte van */}

table tr:hover td{/* Táblázat adat cellái egy sorban, ha az egér fölötte van */}

table tr:nth-child(even) {/* minden második - páros szám - sor */}

table tr:nth-child(odd) {/* minden második - páratlan szám - sor */}