breedte cellen

Status
Niet open voor verdere reacties.
R

RobMan

Gebruiker
Lid geworden
3 okt 2007
Berichten
126
ik ben een beetje aan het experimenteren met HTML maar het lukt me niet om de breedte van de cellen goed te krijgen. Bijvoorbeeld de onderstaande code:

<html>

<head>
<title>
tItEl
</title>
</head>
<body>
<table width="800">
<tr>
<td width="800px" height=100px align=center vertical-align=center bgcolor=red> <b>HOOFDAFBEELDING<b></td>
</tr>
<tr>
<td width="800px" height=40px align=center vertical-align=center bgcolor=yellow><b>HOOFDMENUKNOPPEN<b></td>
</tr>
<tr>
<td width="100px" height=400px bgcolor=green align=center vertical-align=center><b>SUBMENUKNOPPEN<b></td>
<td width="700px" height=400px bgcolor=black align=center vertical-align=center style=color:red><b>INHOUD (iWindow)<b></td>
</tr>
</table>
</body>

</html>
Klik om te vergroten...
Wat er nu gebeurd is dat elke cel de eerstgenoemde breedte aanhoudt maar hoe kan ik dan de breedte van volgende cellen wijzigen? Ook na wat aanpassen lukt het nog niet en nu ziet het er zo uit > zie bijlage...
 

Bijlagen

  • afbeelding.JPG
    afbeelding.JPG
    62,4 KB · Weergaven: 39
Laatst bewerkt:
bij de twee eerste rijen moet je aangeven dat het om één cel gaat terwijl het in de derde rij om twee cellen gaat
dat doe je met

colspan=2

HTML: 
<html>
  <head>
    <title>
      tItEl
    </title>
  </head>
  <body>
    <table width="800px">
      <tr>
        <td colspan=2 height=100px align=center vertical-align=center bgcolor=red>
          <b>HOOFDAFBEELDING<b>
        </td>
      </tr>
      <tr>
        <td colspan=2 height=40px align=center vertical-align=center bgcolor=yellow>
          <b>HOOFDMENUKNOPPEN<b>
        </td>
      </tr>
      <tr>
        <td width="100px" height=400px bgcolor=green align=center vertical-align=center>
          <b>SUBMENUKNOPPEN<b>
        </td>
        <td bgcolor=black align=center vertical-align=center style=color:red>
          <b>INHOUD (iWindow)<b>
        </td>
      </tr>
    </table>
  </body>
</html>

Groetjes,
JHx.
 
Laatst bewerkt:
PS: als ik je opbouw zo even bekijk krijg ik echter wel de indruk dat je beter met FRAMES kan gaan werken... Ik vermoed namelijk dat je, naargelang de keuze die gemaakt wordt in het hoofdmenu, je ook een ander submenu wil laten zien! Dat *kan* wel met een tabel zoals jij gebruikt, maar is veeeeeeeeel eenvoudiger als je frames gebruikt!

Groetjes,
JHx.
 
Bedankt!

Ik zal er eens naar kijken maar ik heb ook nog geen keuze gemaakt qua opbouw en structuur voor de site. Dit is nog slechts proberen...
 
Ik heb nu dit:

HTML: 
<html>

<head>
<title>
tItEl
</title>
</head>

<body>
<table width="800px">
  <tr>
    <td colspan=3 height=100px align=center vertical-align=center bgcolor=red><b>HOOFDAFBEELDING<b></td>
  </tr>
  <tr>
    <td width=266px height=40px align=center vertical-align=center bgcolor=yellow><b>HOOFDMENUKNOPPEN<b></td>
    <td width=266px height=40px align=center vertical-align=center bgcolor=yellow><b>HOOFDMENUKNOPPEN<b></td>
    <td width=268px height=40px align=center vertical-align=center bgcolor=yellow><b>HOOFDMENUKNOPPEN<b></td>
  </tr>
  <tr>
    <td width=200px height=400px bgcolor=green align=center vertical-align=center><b>SUBMENUKNOPPEN<b></td>
    <td colspan=2 bgcolor=black align=center vertical-align=center style=color:red><b>INHOUD (iWindow)<b></td>
  </tr>
</table>
</body>

</html>

Hoe kan ik echter de breedte van de groene cel links onderin veranderen? deze blijft de breedte houden van de gele cel erboven :(
 
Dat kan niet rechtstreeks! Je kan wel de cellen in de derde rij wegdoen en vervangen door 1 cel (rowspan=3) en dan binnen die cel een nieuwe tabel beginnen.
Je zit dan wel nog een beetje met verschillende dikte van de witte rand rond de cellen. In het voorbeeld hieronder heb ik dat opgelost door die rand volledig te laten verdwijnen (cellspacing=0 cellpadding=0). Als je toch omlijning wil kan je eventueel experimenteren met de style van de betreffende cellen. In het voorbeeld heb ik de groene cel een blauwe rand gegeven, en de middelste gele cel een cyan rand. Let daarbij op het verschil in de gebruikte techniek...

HTML: 
<html>
  <head>
    <title>tItEl</title>
  </head>
  <body>
    <table width=800 cellspacing=0 cellpadding=0>
      <tr>
        <td colspan=3 height=100 align=center valign=center bgcolor=red><b>HOOFDAFBEELDING<b></td>
      </tr>
      <tr>
        <td width=266 height=40 align=center valign=center bgcolor=yellow><b>HOOFDMENUKNOPPEN<b></td>
        <td width=266 height=40 align=center valign=center bgcolor=yellow style='border:6px double cyan;'><b>HOOFDMENUKNOPPEN<b></td>
        <td width=268 height=40 align=center valign=center bgcolor=yellow><b>HOOFDMENUKNOPPEN<b></td>
      </tr>
      <tr>
        <td colspan=3>
          <table width='100%' cellspacing=0 cellpadding=0>
            <tr>
              <td width=200 height=400 bgcolor=green align=center valign=center style='border:3px solid #0000FF;border-left:3px solid #0000FF;border-right:3px solid #0000FF;border-bottom:3px solid #0000FF;'><b>SUBMENUKNOPPEN<b></td>
              <td bgcolor=black align=center valign=center style=color:red><b>INHOUD (iWindow)<b></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Groetjes,
JHx.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan