[HTML/CSS] Table heading

[Tepel]

Ik zit momenteel even vast, ik heb een tabel met daarin de standaard tabel dingen.

HTML:

<table>
    <thead>
        <tr>
            <th>Col #1</th>
            <th>Col #2</th>
            <th>Col #3</th>
        </tr>
    </thead>
    <!-- etc -->
</table>

Nu wil ik in mijn th-tjes een setje sorteer icoontjes zetten. Dat is het probleem niet zo, ik wil ze echter aan de rechterkant. Daarin zit het probleem, zodra ik ze ga floaten springen ze naar de volgende regel.

Dus ik zou zoiets als dit krijgen, ik heb de anchor tag even weggelaten want die is volgens mij niet van belang. Iemand een idee over hoe ik dus het plaatje aan de rechterkant van de th krijg.

HTML:

<table>
    <thead>
        <tr>
            <th>Col #1 <img src="sort_asc.png" alt="Ascending" /> <img src="sort_desc" alt="Descending" /></th>
            <th>Col #2 <img src="sort_asc.png" alt="Ascending" /> <img src="sort_desc" alt="Descending" /></th>
            <th>Col #3 <img src="sort_asc.png" alt="Ascending" /> <img src="sort_desc" alt="Descending" /></th>
        </tr>
    </thead>
    <!-- etc -->
</table>

Al het advies is welkom, ik zit er nu al een tijd tegenaan te staren en tot dusverre ben ik nog niet tot een oplossing gekomen. display type van de elementen veranderen hebben geen vruchten afgeworpen. floaten is mislukt en voor de rest kan ik niks nuttigs meer verzinnen.
Een oplossing die hetzelfde bereikt is ook welkom, het aanmaken van nieuwe kolommen wil ik echter vermijden.

[amoen]

euhm...

ik weet niet of het zo simpel is als ik nu denk... maar wat dacht je van een style??

Cascading Stylesheet:

<style>
#links {
  float: left;
}
#rechts {
  text-align: right;
}
</style>

HTML:

<table width="500">
    <thead>
        <tr>
            <th id="rechts"><div id="links">Col #1</div> <img src="sort_asc.png" alt="Ascending" /> <img src="sort_desc" alt="Descending" /></th>
            <th id="rechts"><div id="links">Col #2</div> <img src="sort_asc.png" alt="Ascending" /> <img src="sort_desc" alt="Descending" /></th>
            <th id="rechts"><div id="links">Col #3</div> <img src="sort_asc.png" alt="Ascending" /> <img src="sort_desc" alt="Descending" /></th>
        </tr>
    </thead>
    <!-- etc -->
</table>

edit:

volgens mij bedoel je dat Col #1 links moet staan en het plaatje rechts... niet?

[ Voor 16% gewijzigd door amoen op 18-09-2006 14:49 ]

[Tepel]

Hah! weet je hoe apart. Ik kan niet de plaatjes in een apart element gooien die die rechts uitlijnen. Maar ik mag wel de tekst links uitlijnen en de text in de th weer rechts. In ieder geval, jouw methode werkt. Het wint geen schoonheidswedstrijd maar het werkt.

-- Edit

Het schijnt niet te werken in IE. God mag weten waarom, IE draait in W3C modus, Quircksmodus wil ik eigenlijk weer vermijden omdat dat weer gepruts geeft met padding e.d.

[ Voor 26% gewijzigd door Tepel op 18-09-2006 15:17 . Reden: Nieuwe Info ]

[Janoz]

Ikzelf heb meerdere malen mijn tabulaire data laten genereren door de Display tag library (Het ging hier ook over java web applicaties). Ook hier werd gebruik gemaakt van icoontjes die aangaven hoe er gesorteerd was. De oplossing die zij gekozen hebben vond ik een erg nette. Hierbij werd gewerkt met een background die een align right en no-repeat had. Welk png-tje werd gebruikt hing af van de class.

Meer info over de display tag is hier te vinden. Ze zullen vast wel ergens een voorbeeld hebben waarbij je naar de gegenereerde source kunt kijken.


EDIT: Na wat rondklikken blijkt die site vooral over de java kant te gaan. Ergens verstopt zit nog wel een linkje naar live examples. Hier kun je dan mooi kijken hoe de gegenereerde html en de stylesheets eruit zien.

Laatste link: http://displaytag.homeip....s-1.1/example-sorting.jsp

[ Voor 23% gewijzigd door Janoz op 18-09-2006 15:24 ]

[Tepel]

Ah, die oplossing is wel netjes. Ik zat er zelf net ook even over te denken maar ik had gehoopt op een iets simpelere oplossing. Maar dit zal prima volstaan denk ik zo.