Avatar billede franco Nybegynder
09. marts 2010 - 18:13 Der er 5 kommentarer og
1 løsning

div class på tabeller/celler

Hej!

Er lidt ny i CSS verden - men spændende :)
Er vant til at bygge sites op i tabeller, og vil gerne forsætte dermed.

Spørgsmål; Når jeg har sat en div class på en tabel, hvordan sætter jeg så en div class på en enkelt celle i tabellen - altså tabellen har en div class med en baggrundsfarve, en celle i tabellen skal have en div class med en anden bagrundsfarve - kan jeg det? Og hvordan? :)

Eksempelet her virker ikke, div class på tabellen overruler div class på cellen:

<div class="tabel_bg1">
<table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0" height="100%" >
  <tr>
    <th align="left" valign="top" scope="col"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th colspan="3" scope="col"> </th>
        </tr>
      <tr>
        <div class="main_cell"><th width="600" scope="col">  </th></div>
        <th width="150" scope="col"></th>
        <th rowspan="2" scope="col"> </th>
      </tr>
      <tr>
        <th colspan="2" scope="col"> </th>
        </tr>
    </table>      <p> </p>    </th>
  </tr>
</table></div>
Avatar billede Slettet bruger
09. marts 2010 - 18:23 #1
Du kan sætte en class direkte på både tabellen og de enkelte felter:

<table class="table_class">
  <tr class="tr_class">
    <td class="td_class">
Avatar billede franco Nybegynder
09. marts 2010 - 18:36 #2
Tak - kan du pensle det lidt ud?

Hvordan skriver jeg det i CSS filen?

- og hvordan hvis jeg vil have flere "table class"?
Avatar billede Slettet bruger
09. marts 2010 - 19:43 #3
Gerne. Jeg tror det letteste er et eksempel

CSS:
red_background {
  background-color: red;
}
yellow_background {
  background-color: yellow;
}



HTML:
<table class="red_background">
  <tr>
    <td class="yellow_background">Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
</table>
<table class="yellow_background">
  <tr>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
  <tr>
    <td>Lorem Ipsum</td>
    <td class="red_background">Lorem Ipsum</td>
  </tr>
</table>


Ovenstående kode laver en rød tabel med et gult felt og en gul tabel med et rødt felt. Prøv det gerne selv af.
Avatar billede franco Nybegynder
09. marts 2010 - 21:42 #4
Tak - det virker :-)
Mangler lige en dot i CSS før rød og gul :-)

Smid et svar - jeg vender sikkert tilbage med flere ?, :-))
Avatar billede Slettet bruger
09. marts 2010 - 22:08 #5
Hvilken prik?
Avatar billede franco Nybegynder
09. marts 2010 - 22:12 #6
.red_background {
  background-color: red;
}
.yellow_background {
  background-color: yellow;
}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



IT-JOB

PensionDanmark

ML Engineer

Cognizant Technology Solutions Denmark ApS

Energy Trading Project Manager – Consulting

Dynamicweb Software A/S

Solution Architect

Netcompany A/S

IT Consultant