HTML Table

Status
Niet open voor verdere reacties.
C

Cross

Gebruiker
Lid geworden
30 jul 2011
Berichten
142
Beste allemaal.


Ik wil een table,

Op de eerst rij 3 vakken.
33% per vak.
De 2e rij heeft maar 2 vakken.
Die wil ik 50% per vak.

Zodat het een mooi even beeld word. Nu krijg ik telkens de onderkant netjes. Maar de bovenkant werkt niet mee.

Heeft iemand suggesties?

<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3 width="100%">
<TR>
<TD colspan="3" width="50%">This Goes Across the Top!</TD>
<TD colspan="4" width="50%">This Goes Across the Top!</TD>
</TR>
<TR>
<TD colspan="3" width="33%">Cell</TD>
<TD width="33%">Cell</TD>
<TD width="33%">Cell</TD>
</TR>

</TABLE>
Normaal ben ik wel handig met HTML maar dit is me toch een raadsel.

Ik heb nu ff gauw een voorbeeld code gemaakt met een table generator omdat mijn table al vol gestouwd staat met php.
Ik weet dat ik dit ooi al eerder heb gedaan alleen was het dan 4 om 2 ..

Alle (werkende) suggesties zijn welkom!
 
Dat was 4 om 1.
4 x 25 %, rij 2: 1 x 100%

Excuus.
 
Code: 
[B]HTML bestand[/B]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Table</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table">
  <div class="row25 clearfix textcenter">
    <div>tekst 1</div>
    <div>tekst 1</div>
    <div>tekst 1</div>
    <div>tekst 1</div>
  </div>
  <div class="row100 clearfix textcenter">
    <div>tekst 4</div>
  </div>
</div>
</body>
</html>

[B]CSS bestand[/B]

/* simpele reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font: normal 16px arial,sans-serif;
}

/* clearfix */
.clearfix:before {content:""; display:table;}
.clearfix:after  {content:""; display:table; clear:both;}

/* positie tekst */
.textleft {text-align: left;}
.textcenter {text-align: center;}
.textright {text-align: right;}

/* tabel */
.table, .row25, .row33, .row50, .row100 {
  width: 100%;
}
.row25 > div, .row33 > div, .row50 > div, .row100 > div {
  float: left;
  [COLOR="#0000FF"]box-sizing: border-box;[/COLOR]
}
.row25 > div  { width: 25%; }
.row33 > div  { width: 33.33%; }
.row50 > div  { width: 50%; }
.row100 > div { width: 100%; }

*** edit 1 *** kleine aanpassing in blauw zodat je borders kunt gebruiken.

*** edit 2 *** aanvulling zoals je het wilt (met randen)
Code: 
.table {
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}
.row25 > div, .row33 > div, .row50 > div, .row100 > div {
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  padding: 5px;
}
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan