Simpelt layout (tabeller)

Linket skal copy/pastes for at virke

<table>
<tr>
<td colspan=2>
Logo
</td>
</tr>
<tr>
<td colspan=2>
spacer
</td>
</tr>

<tr>

<td>

Menu

</td>

<td>
Context
</td>
</tr>
<tr>
<td colspan=2>
Box@bottom
</td>
</tr>
</table>

<table>
  <tr>
    <td colspan="2">Banner / logo</td>
  </tr>
  <tr>
    <td colspan="2">Top menu</td>
  </tr>
  <tr>
    <td>menu</td>
    <td>main</td>
  </tr>
  <tr>
    <td colspan="2">Bundbar</td>
  </tr>
</table

mangler > til sidst.

Hvordan får jeg så en fin lille sort streg mellem det hele, så det ligner skitsen?

Ret <table> til <table border=1 bordercolo=black> så vidt jeg husker

Det bliver ikke for kønt på den måde.

Jeg har engang haft lavet det så det ligner skitsen, men jeg kan ikke lige komme på hvordan ;-)

<table height="500" width="600" style="border: 1px solid black;">
  <tr>
    <td colspan="2">Banner / logo</td>
  </tr>
  <tr>
    <td colspan="2">Top menu</td>
  </tr>
  <tr>
    <td width="25%">menu</td>
    <td width="75%">main</td>
  </tr>
  <tr>
    <td colspan="2">Bundbar</td>
  </tr>
</table>

Nu er der så sort streg om det hele - fint. Men jeg skal også have sort streg som indikerer indelingen af menu osv. som på skitsen.

Hvis det er noget besværligt noget, så evt. link til hvor jeg kan læse om det. Det må vel være noget style der skal bruges til det også.

Jeg fandt det selv:
http://www.w3schools.com/css/css_border.asp

<table height="500" width="600" style="border: 1px solid black;">
<tr>
<td height="65" colspan="2" style="border-bottom: 1px solid black;">Banner / logo</td>
</tr>
<tr>
<td height="30" colspan="2" style="border-bottom: 1px solid black;">Top menu</td>
</tr>
<tr>
<td width="25%" style="border-right: 1px solid black;">menu</td>
<td width="75%">main</td>
</tr>
<tr>
<td height="30" colspan="2" style="border-top: 1px solid black;">Bundbar</td>
</tr>
</table>

Det irriterer mig dog lidt at jeg ikke kan få stregerne til at være helt samlet. Der er vel 1 pixel eller 2 imellem der hvor stregerne mødes.

Kan man gøre noget ved det?
htm du må gerne smide et svar.

Ja du fandt selv en god side :)

For at samle dem skal du bruge cellspacing="0" cellpadding="0" på din table:

<table height="500" width="600" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">Banner / logo</td>
  </tr>
  <tr>
    <td colspan="2">Top menu</td>
  </tr>
  <tr>
    <td width="25%">menu</td>
    <td width="75%">main</td>
  </tr>
  <tr>
    <td colspan="2">Bundbar</td>
  </tr>
</table>


Du kan også lave tricket med borders ved at skrive sådan i din head:

<style type="text/css">
table
{
    border-color: black;
    border-width: 0 0 1px 1px;
    border-style: solid;
}
td
{
    border-color: black;
    border-width: 1px 1px 0 0;
    border-style: solid;
}
</style>

Det sørger også for borders i din tabel.