[HTML] uitlijning van een tabel met een list.

[mcB]

Na de search en google gebruikt hebben toch maar een topicje openen.

Situatie:
Ik heb een tabel met 2 kolommen.
Kolom 1 bevat een tiental rijen met in elke rij een list (<ul>, max 10 items).
Kolom 2 bevat de eigenschappen van elk item uit de lists.

Probleem:
• De eigenschap van een list-item in kolom 2 staat niet wat betreft hoogte achter de list-item waar deze bij hoort.

• Er wordt gebruik gemaakt van een vastgelegde CSS. Hierin wordt niets anders over lists opgenomen dan de 'type'.

• De html code moet te snappen zijn voor iemand wiens html-kennis gaat tot het kunnen plaasten van een list in een table row.

Wat ik al heb geprobeerd:
Ik heb al geprobeerd om elk listitem in een aparte list in een aparte rij te zetten.

Vraag:
Hoe krijg ik nu de eigenschappen per list item precies achter dat item in de 2e kolom? Iemand creatieve ideeen??

[Willem]

Heb je een voorbeeld online staan?

Probeer eens even iets met margin en padding te spelen in je 2e kolom.

[mcB]

Heb helaas geen voorbeeld online. Het komt op een intranetpagina.

[Marcj]

Je bedoelt zoiets? (in UBB-code, maar HTML is bijna gelijk...)

blaat1 - <- opvulling een probleem??? werkt hier niet... blaat2 lang lang lang lang lang lang lang lang lang lang lang lang lang lang lang lang blaat3 - <- zelfde probleem?	hoort bij blaat1 hoort bij blaat2 hoort bij blaat3
en zo nog veel meer rijen...

[sjroorda]

Ik werk in deze gevallen altijd met een tweede tabel binnen een cel. Maar gezien jouw 3e puntje onder 'probleem' mag dat niet .

[mcB]

@ Willem169

• Padding ken ik alleen in de zin van cellpadding. In die context snap ik niet hoe jij daar een oplossing in ziet.
• Margin is iets waarmee de style wordt aangepast. Dit mag echter niet gebeuren omdat het een bedrijfsdocument is met een vooraf bepaalde stylesheet. Hier mag niets aan toegvoegd worden. Het definieren van een style in HTML is voor de toekomstige beheerder te moeilijk.


@ Marcj

Zo zou het moeten, maar dan zonder die bullets voor de itemas in kolom 2

De huidige situatie is dat de verticale afstand tussen de items in kolom 2 niet gelijk is aan die in kolom 1, wanneer de list-items daar meer dan 1 regel beslaan.

[ Voor 46% gewijzigd door mcB op 12-05-2003 14:04 ]

[Marcj]

De beste optie lijkt mij idd ook een tabel binnen een tabel. En dan moet je de gebruikers maar een HTML-cursus geven over tabellen.
Of een andere optie is een PHP-scriptje oid schrijven waarmee gebruikers makkelijk nieuwe lijsten kunnen toevoegen. Zo kun je zelf daarna netjes een HTML-output geven.

[Verwijderd]

Is het een Statische of een Dynamisch list?

[Willem]

Ik vroeg wat je al had geprobeerd met margin en padding (en evt. line-height) bij de items in de 2e kolom. Als je daar nu eens even iets mee uitprobeert....

[mcB]

@ willem169 Zie mijn bovenstaande post.


Het is een statische list.

(Kleine info over de situatie;
Het gaat om een html document voor op intranet. De maker van dat document heb ik al overtuigd om af te stappen van frontpage en alles zelf in html te tikken. Alles ging goed, behalve de tabellen. Nu vind ik dat al die MS html crap daar ook uit moet om zo betere code te krijgen en om het opmaakverhaal op te lossen.
Na deze tabel zullen er nog enkele andere vergelijkbare tabellen aangepakt moeten worden.)

[Verwijderd]

Op deze manier zou het moeten lukken?!!

<table border="1">

<tr>
<td width="50px">
<ul>
<li>blaat</li>
<li>blaat</li>
</ul>
</td>
<td width="40px" valign="top">item 1<br>item2</td>
</tr>

</table>

[Verwijderd]

Aantal <br>'s tussen de item 1, item 2, etc aanpassen/uitlijnen en klaar.

[Verwijderd]

Ik denk dat jij alleen valign="top" nog niet in de kolom heb gezet;
das denk ik wat je nodig hebt

[sjroorda]

Het probleem is dat je niet van tevoren weet hoeveel regels 1 listitem in beslag neemt, dus dat je ook niet kan zeggen 'dan proppen we aan de rechterkant zoveel <br>'s ertussen'.

Enne... is ook heel handig om even wat info aan je eigen post toe te voegen .

[Willem]

mcB:
@ Wwillem169

• Padding ken ik alleen in de zin van cellpadding. In die context snap ik niet hoe jij daar een oplossing in ziet.

D'r bestaat ook padding van inline elementen.
Neem bijvoorbeeld een <span> of een <div>

mcB:
• Margin is iets waarmee de style wordt aangepast. Dit mag echter niet gebeuren omdat het een bedrijfsdocument is met een vooraf bepaalde stylesheet. Hier mag niets aan toegvoegd worden. Het definieren van een style in HTML is voor de toekomstige beheerder te moeilijk.

Als 't een kwestie is van uitlijnen lijkt me een toevoeging van margin of padding geen afbreuk doen van het geheel in de zin van een vooraf bepaalde stylesheet.

Lijkt me

[Verwijderd]

Misschien is zoiets wat je wil:

code:

<html><head><title>Untitled</title>
<style type="text/css">
table{
width:500px;
}
td div{
display:list-item;
padding:15px;
}
</style>
</head>
<table>
<tr><td><div>test1</div></td><td>test1</td></tr>
<tr><td><div>test1</div></td><td>test1<br>test2</td></tr>
<tr><td><div>test1</div></td><td>test1</td></tr>
<tr><td><div>test1</div></td><td>test1<br></td></tr>
</table>
</body></html>

[Verwijderd]

@ Sjroorda

Hoezo kan dat niet want het is een statische list dus weet je dat toch wel van te voren.
Je Height en Width vastzetten en dan is er toch geen probleem; Okey het is niet echt netjes maar wel begrijpelijk;
Of begrijp mcB's probleem niet?


EDIT: TUURLIJK (lol)

[ Voor 7% gewijzigd door Verwijderd op 12-05-2003 14:44 ]

[sjroorda]

Hmmm... volgens mij heb je gelijk

[mcB]

@ Martijn22

Jouw voorbeeld komt al aardig in de goede richting.
Het enige dat er nog ontbreekt is de bullets voor de items in de 1e kolom (style zoals gedefinieerd in externe css). Enig idee hoe ik deze ervoor kan krijgen?


@Fietstas

Je hebt gelijk dat het op jouw manier ook lukt. het probleem is wel dat voor ieder aan te maken tabel de breedte van de 2e kolom empirisch vastgesteld moet worden. De lengten van de teksten die in de 2e kolom van de andere tabellen komen zijn nu eenmaal niet gelijk.

[ Voor 49% gewijzigd door mcB op 12-05-2003 14:52 ]

[Verwijderd]

Dan wordt het zoiets:

HTML:

<html><head><title>Untitled</title>
<style type="text/css">
table{
width:500px;
}
</style>
</head>
<table summary="">
<tr><td><ul><li>test1</li></ul></td><td>test1<br>test2<br>test2</td></tr>
<tr><td><ul><li>test1</li></ul></td><td>test1<br>test2<br>test2</td></tr>
<tr><td><ul><li>test1</li></ul></td><td>test1<br>test2<br>test2</td></tr>
<tr><td><ul><li>test1</li></ul></td><td>test1<br>test2<br>test2</td></tr>
<tr><td><ul><li>test1</li></ul></td><td>test1<br>test2<br>test2</td></tr>
<tr><td><ul><li>test1</li></ul></td><td>test1<br>test2<br>test2</td></tr>
</table>
</body></html>

Het begint al wel aardig op tag soup te lijken...

[Verwijderd]

@mcB

Je mag dus echt niet elke item in een andere regel zetten?
Dus wat hieronder staat mag niet?

<table>
<tr>
<td valign="top" width="100px"><li>bla bla blah blah bla bla blahbla bla blah blah bla bla blahbla bla blah</li></td>
<td valign="top">ja nee ja ja toch niet ja nee ja ja toch niet ja nee ja ja toch niet ja nee ja ja toch niet ja nee ja ja toch niet
ja nee ja ja toch nietja nee ja ja toch nietja nee ja ja toch nietja nee ja ja toch nietja nee ja ja toch niet</td>
</tr>
<tr>
<td valign="top"><li>bla bla blah bla bla blahbla bla blah</li></td>
<td valign="top">ja nee ja ja toch niet ja nee ja ja toch niet ja nee ja ja toch niet</td>
</tr>
</table>

[mcB]

Verwijderd schreef op 12 May 2003 @ 14:19:

code:

<table border="1">
<tr>
<td width="50px">
<ul>
<li>blaat</li>
<li>blaat</li>
</ul>
</td>
<td width="40px" valign="top">item 1<br>item2</td>
</tr>
</table>

Ik kies toch voor dit advies Fietstas.
Elk item in een aparte regel zou ook kunnen, maar dan loop ik tegen een border probleem aan.

@ Martijn22

Jouw laatste voorbeeld was een enkel listitem dat meerdere opties in de 2e kolom heeft. Dat was niet nodig. Het probleem dat zich anders voor zou doen is dat de listitems hoger staan dan 'normale' tekst.


Heel erg bedankt voor jullie hulp.!

Borderprobleem. --> Buitenkant van tabel moet een rand krijgen, de scheiding tussen de kolommen en tussen de rijen (wanneer een list (list = 1 onderwerp) in meerdere rijen gemaakt zou worden, dan zouden er borders binnen zo'n onderwerp komen).

[ Voor 61% gewijzigd door mcB op 12-05-2003 15:15 ]

[Verwijderd]

graag gedaan maaruh welk border probleem bedoel je?

okey; Succes verder;

[ Voor 20% gewijzigd door Verwijderd op 12-05-2003 15:16 ]