hjælp til tabel i div

*Update* - Man skal desuden kunne definere padding i text-cellerne, uafhængigt af padding i billede-cellerne!!!

<ole>

Her kan du lære at skrive hele koden:
  http://www.html.dk

/mvh
</bole>

<div id="container">
    <table>
    <tr>
        <td>Hej</td><td class="textbox">Hej</td><td>Hej</td><td        class="textbox">Hej</td><td>Hej</td>
    </tr>
    <tr>
        <td class="textbox">Hej</td><td>Hej</td><td class="textbox">Hej</td><td>Hej</td><td class="textbox">Hej</td>
    </tr>
    <tr>
        <td>Hej</td><td class="textbox">Hej</td><td>Hej</td><td class="textbox">Hej</td><td>Hej</td>
    </tr>
    </table>
      </div>


med tilhørende css:
#container {
    position:relative;
      width: 700px;
    height: 400px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;   
      text-align: left;
    border: 1px solid #696969;
   
}
table
    {
    width: 700px;
    height: 375px;
    margin: 0px 0px 0px 0px;
    border: 1px solid #FF4040;
   
}

td
    {
      border: 1px solid #696969;
    width: 140px;
    height: 125px;
    margin: 0px 0px 0px 0px;
}
td.textbox
    {
      width: 140px;
    height: 125px;
    background-color: #696969;
    border: 1px solid #696969;
    font-family: verdana, "Trebuchet MS", sans-serif;
    font-size: 13px;
    color: #FFFFFF;
    font-style: italic;
}

KONKRET PROBLEM: Når jeg definerer padding i td.textbox (er ikke indsat her) så udvides cellerne med 10px!!! Det skal jo i stedet sætte 10 px til teksten i cellen!

+ Savner en kode, sådan at de billeder jeg indsætter i celle-tags hvor der ikke er tekst ikke udvider tabellen, (i div ville man bruge overflow: hidden;!

Nej, i følge CSS-standarden, skal cellen udvides med det, der sættes som padding. Det er lige efter bogen  :)

Du lægger bare et div med overflow:hidden og de rette dimensioner udenom billedet.

Ok - det har jeg så gjort nu ser det sådan ud:

<div id="container">
   
        <div id="a"></div>
    <div id="b">Hej</div>
    <div id="c"></div>
    <div id="d"></div>
    <div id="e"></div>
    <div id="f"></div>
    <div id="g"></div>
    <div id="h"></div>
    <div id="i"></div>
    <div id="j"></div>
    <div id="k"></div>
    <div id="l"></div>
    <div id="m"></div>
    <div id="n"></div>
    <div id="o"></div>
    </div>
#container {
    position: relative;
      width: 722px;
    height: 386px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;   
      text-align: left;
    border: 1px solid #696969;
   
}
#container div{
        float: left;
        width: 140px;
    height: 125px;
        overflow: hidden;
        margin: 1px 1px 1px 1px;
        border: 1px solid #696969;
}
#a {
    background: #FFFFFF url(lampe.jpg) no-repeat top left;
}
#b {
    background-color: #696969;
}
#c {
    background: #FFFFFF url(lampe.jpg) no-repeat top left;
}
#d {
    background-color: #696969;
}
#e {
    background: #FFFFFF url(lampe.jpg) no-repeat top left;
}
#f {
    background-color: #696969;
}
#g {
    background: #FFFFFF url(lampe.jpg) no-repeat top left;
}
#h {
    background-color: #696969;
}
#i {
    background: #FFFFFF url(lampe.jpg) no-repeat top left;
}
#j {
    background-color: #696969;
}
#k {
    background: #FFFFFF url(lampe.jpg) no-repeat top left;
}
#l {
    background-color: #696969;
}
#m {
    background: #FFFFFF url(lampe.jpg) no-repeat top left;
}
#n {
    background-color: #696969;
}
#o {
    background: #FFFFFF url(lampe.jpg) no-repeat top left;
}

PROBLEM: Jeg kan ikke sætte PADDING på fx div id="b"? Hvorfor det? I stedet udvider den sig!?

Nu har jeg sat padding på <p> i stedet for på div'en! Det hjælper.