tabel verticaal centreren lukt me niet.....

[anoniem]

Hallo, Ik snap het even niet meer. Ik probeer om een bepaalde tekst in een tabel zowel verticaal als horizontaal gecentreerd te krijgen, maar ik weet niet wat ik over het hoofd zie.... Onderstaande tabel is mijn tabel, en hierin wil ik de tekst "test" gecentreerd hebben. Volgens mij klopt de code, maar ik krijg de tekst niet verticaal gecentreerd, wel horizontaal. " <table border="1" cellpadding="0" cellspacing="0"> <tr align="center" valign="bottom"> <td width="496"><img src="../pictures/timloto.gif" height="122" width="496" alt="TIMLOTO"></td> <td width=100% height="124">test</td> </tr> </table> " Wie kan mij een stapje verder helpen? Met vriendelijke groeten, W.Tulp

[anoniem]

Sorry, valign moet natuurlijk "middle zijn" zoals in onderstaande tekst. Maar dan nog werkt het niet. Hallo, Ik snap het even niet meer. Ik probeer om een bepaalde tekst in een tabel zowel verticaal als horizontaal gecentreerd te krijgen, maar ik weet niet wat ik over het hoofd zie.... Onderstaande tabel is mijn tabel, en hierin wil ik de tekst "test" gecentreerd hebben. Volgens mij klopt de code, maar ik krijg de tekst niet verticaal gecentreerd, wel horizontaal. " <table border="1" cellpadding="0" cellspacing="0"> <tr align="center" valign="bottom"> <td width="496"><img src="../pictures/timloto.gif" height="122" width="496" alt="TIMLOTO"></td> <td width=100% height="124">test</td> </tr> </table> " Wie kan mij een stapje verder helpen? Met vriendelijke groeten, W.Tulp

[anoniem]

<table border="1" cellpadding="0" cellspacing="0"> <tr> <td width="496"><img src="../pictures/timloto.gif" height="122" width="496" alt="TIMLOTO"></td> <td width="96" valign=middle align=center>test</td> </tr> </table> Olaf

[anoniem]

1. Tabellen dienen niet gebruikt te worden voor layout. 2. http://annevankesteren.nl/test/templates/center-hv

[anoniem]

[quote:2c4db0f04d="termin8or"]1. Tabellen dienen niet gebruikt te worden voor layout. [/quote:2c4db0f04d] toch wel: [quote:2c4db0f04d]Van tabellen wordt in HTML-pagina's op grote schaal gebruik gemaakt. Dit heeft zeker te maken met de mogelijkheden die tabellen bieden bij het geven van de gewenste lay-out aan een document. [/quote:2c4db0f04d] http://www.handleidinghtml.nl (kijk bij tabellen :o ) tuurlijk moeten de styles ze gaan vervangen maar dit is nog lang niet het geval.

[anoniem]

oei oei... [color=red:426ada2de9]*teacher duikt onder bureau...[/color:426ada2de9]

[anoniem]

[quote:d5b2c95bc3="Blackdrive"]http://www.handleidinghtml.nl (kijk bij tabellen :o ) tuurlijk moeten de styles ze gaan vervangen maar dit is nog lang niet het geval.[/quote:d5b2c95bc3] [size=7:d5b2c95bc3]'voor' schot[/size:d5b2c95bc3] Net alsof die website gezag heeft :P Heb je tabellen op de [url=http://www.w3.org/]w3c[/url] site gezien voor de layout? Tip lees http://www.hotdesign.com/seybold/ eens door

[anoniem]

[quote:c3ed47ee32="Timonsweb"][quote:c3ed47ee32="Blackdrive"]http://www.handleidinghtml.nl (kijk bij tabellen :o ) tuurlijk moeten de styles ze gaan vervangen maar dit is nog lang niet het geval.[/quote:c3ed47ee32] [size=7:c3ed47ee32]'voor' schot[/size:c3ed47ee32] Net alsof die website gezag heeft :P Heb je tabellen op de [url=http://www.w3.org/]w3c[/url] site gezien voor de layout? Tip lees http://www.hotdesign.com/seybold/ eens door[/quote:c3ed47ee32] Er is geen woord van gelogen, wat op http://www.handleidinghtml.nl staat. Lees het nog maar eens goed: [quote:c3ed47ee32] Van tabellen wordt in HTML-pagina's op grote schaal gebruik gemaakt. Dit heeft zeker te maken met de mogelijkheden die tabellen bieden bij het geven van de gewenste lay-out aan een document. [/quote:c3ed47ee32] Er staat in feite gewoon: het gebruik van tabellen is erg populair, omdat je op die manier makkelijker de layout krijgt die je wil, crossbrowser. Met css moet je soms heel wat meer moeite doen. http://www.handleidinghtml.nl is als leermiddel en referentiemateriaal voor html eigenlijk de beste die ik ken. Met css loopt het wat achter, maar dat wat het heeft is ook absoluut de moeite waard. Lees dit anders ook maar door. Van iemand die het kan weten: http://dbaron.org/log/2003-11

[anoniem]

@ Blackdrive Tabellen zijn goed te gebruiken voor het layouten van een pagina. Maar daar zijn ze niet voor bedoeld. En wie het argument gebruikt dat tabellen heel goed een layout kunnen neerzetten om vervolgens niet met CSS aan de slag te gaan gedraagt zich onprofessioneel en benadeelt zijn klanten. Ik snap ook niet waarom er zo'n weerstand is tegen CSS, ik heb web developers nooit als lui en onwetend ervaren. Wie zijn werk serieus neemt weet wat die aan CSS heeft en wanneer je terug kan vallen op een oude tabel layout. En eerlijk is eerlijk dat is in zeer weinig gevallen nodig. Handleidinghtml zou daarom meer aandacht aan CSS moeten wijden. Soms hoor je wel dat de waarheid ergens tussen twee extremen zit. Maar omdat er steeds meer geniale CSS werk te zien is doet dat mij denken dat tabellen gewoon tabellen moeten zijn en niet als het raamwerk voor een layout moeten dienen. Wie daar anders over denkt moet misschien weer op cursus. Zolang het lesmateriaal niet van een verouderde HTML informatiebron is gekopieerd.

[anoniem]

[quote:8573e71edf="mw22"]Er is geen woord van gelogen, wat op http://www.handleidinghtml.nl staat. Lees het nog maar eens goed: [/quote:8573e71edf] Dat zeg ik ook niet. Ik had het idee dat jij zegt dat tabellen wel voor de layout zijn _bedoelt_ zijn alleen omdat http://www.handleidinghtml.nl dat zegt.

[anoniem]

Nee dat klopt, tabellen zijn niet voor layout bedoeld. Maar ik denk wel dat er nog situaties zijn die niet zonder tables zijn op te lossen. Ik moet wel zeggen dat ik niet zo 1,2,3 een voorbeeld weet in welke situaties, maar goed. In het probleem van dit topic zou ik zeker geen tabel gebruiken. Inderdaad, misschien is http://www.handleidinghtml.nl wel een beetje een ouderwets met zijn tabel-gebruik, maar met de inhoud vind ik verder niks mis. Bovendien maakt mij niet uit hoe een website is opgebouwd, als die er maar goed uitziet. Ik ging meer in het geweer tegen de opmerking dat http://www.handleidinghtml.nl geen gezag heeft. Ik heb er zelf veel eerbied voor en heb er veel van geleerd.

[anoniem]

Domdiedom... display:table; ... (afgezien van browser support natuurlijk)

[anoniem]

Afgezien van browser-support, inderdaad, wat toch best wel belangrijk is. Maar inderdaad, de visuele aspecten van ieder html-element is wel zo'n beetje vastgelegd in css, dus zo gauw de browser-support er is, maakt het voor styling iig niet meer uit welk element je gebruikt.

[anoniem]

Dit is trouwens ook niet helemaal waar. Je hebt ook nog zoiets als colspan en rowspan attributes bedenk ik me nu. Hier wordt veelvuldig gebruik van gemaakt in table-based designs. Voor zover ik weet is dit niet te doen met css.

[anoniem]

Klopt: http://www.w3.org/TR/CSS21/tables.html#q7[quote:faf5c70bfd="CSS21"]5. Cells may span several rows or columns. (Although CSS 2.1 doesn't define how the number of spanned rows or columns is determined, a user agent may have special knowledge about the source document; a future version of CSS may provide a way to express this knowledge in CSS syntax.) Each cell is thus a rectangular box, one or more grid cells wide and high. The top row of this rectangle is in the row specified by the cell's parent. The rectangle must be as far to the left as possible, but it may not overlap with any other cell box, and must be to the right of all cells in the same row that are earlier in the source document. (This constraint holds if the 'direction' property of the table is 'ltr'; if the 'direction' is 'rtl', interchange "left" and "right" in the previous sentence.)[/quote:faf5c70bfd]En het lijkt erop dat dit niet gaat veranderen: http://www.w3.org/TR/css3-roadmap/#tables

[anoniem]

Hmm, dat lijkt me eigenlijk wel ernstig. Dat is toch wel handige eigenschappen van een tabel. Hoe moet dit nu in xml? Of hebben ze daar ook colspan en rowspan?

[anoniem]

Nee (hoewel CSS tabellen wel makkelijker zijn, dus ook nestingen zijn makkelijker: [url]http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes[/url]). Een veel groter probleem is IMO dat 'css-table-height' == 'css-min-height' op die manier mis je een hele hoop mogelijkheden.

[anoniem]

[quote:7ef017ab41="termin8or"]Nee (hoewel CSS tabellen wel makkelijker zijn, dus ook nestingen zijn makkelijker: [url]http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes[/url]). Een veel groter probleem is IMO dat 'css-table-height' == 'css-min-height' op die manier mis je een hele hoop mogelijkheden.[/quote:7ef017ab41] Waar staat dat in de spec, ik kan het niet vinden. Wat voor mogelijkheden mis je dan precies? Is het niet inherent aan het table model? Als je min-height wil gebruiken kun je toch altijd nog een andere display property gebruiken?

[anoniem]

'min-height' is bij tabellen dus standaard. Je kunt niks anders gebruiken ('height' gedraagt zich net zoals in IE, de box rekt mee uit en de inhoud gaat er dus nietoverheen zoals je zou verwachten). Een TD element met 'overflow' gaat dus niet (behalve bij table-layout:fixed;, maar dat is alleen horizontaal). http://www.w3.org/TR/CSS21/tables.html#height-layout[quote:83e0623354]CSS 2.1 does not specify rendering when the specified table height differs from the content height, in particular whether content height should override specified height; if it doesn't, how extra space should be distributed among rows that add up to less than the specified table height; or, if the content height exceeds the specified table height, whether the UA should provide a scrolling mechanism.[/quote:83e0623354]Inhoud (content) krijgt altijd voorrang volgens de implementatie in de browsers. Nog eentje:[quote:83e0623354]In CSS 2.1, the height of a cell box is the maximum of the table cell's 'height' property and the minimum height required by the content (MIN).[/quote:83e0623354]Inhoud heeft weer voorrang. Dat zou dus helemaal niet mogen IMO! Het mag dan wel misschien zo zijn geweest bij HTML tabellen, maar dan zou nu gezegt moeten worden dat je daar 'min-height' voor nodig hebt, zodat de voordelen van 'height' -> 'overflow' behouden blijven.

[anoniem]

Ik geloof dat ik hem ongeveer snap. Waarom ze dit zo gedaan hebben, geen idee. Maar met de extreem handig ::ouside pseudo-element selector valt er denk ik heel wat te hacken: [code:1:ee448aa7c0] td { display:block; height:100px; } td::outside{ display:table-cell; } [/code:1:ee448aa7c0]