CSS: Verschillende tabellen in een div id

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
Plaats reactie
Poehtje
Berichten: 16
Lid geworden op: 18 november 2010, 7:19
    Windows 7 Internet Explorer 8

CSS: Verschillende tabellen in een div id

Bericht door Poehtje »

Ik heb een leuk script gevonden waar ik - voor mijn doen- makkelijk css tabellen kan maken en zelf aanpassen. Het probleem is dat deze in een id staat die je maar 1x mag gebruiken, en ik heb op mijn pagina's verschillende tabellen onder elkaar.

De code-aanroep(?) is <table class="table" id="artikeltabel" align="center" cellpadding="0" cellspacing="0">

De html code kun je hier in de bron vinden: http://www.demijmerij.nl/csstabel.html

Ik heb al geprobeerd om id="artikeltabel" in een aparte div te zetten, dus vòòr de tabellen <div id="artikeltabel"> daartussen de afzonderlijke tabellen en daaronder een afsluitende </div>, maar dat werkt niet want dan gooit hij mij de layout van de tabel door de war. Het is voor het eerst dat ik een css tabel gebruik ipv tabellen via NVU omdat ik dat makkelijker vindt als ik eens de layout wil veranderen.

Wie kan mij hiermee helpen om verschillende tabellen in die ene code te krijgen? Of verschillende tabellen mèt deze code?

Volledige css van de tabel is:

#artikeltabel {
width: 700px;
border-collapse: collapse;
border: 2px dotted #E05568;
}

#artikeltabel .rowa {
background:url(afb/ginghamroze.jpg)
height: 25px;
}
#artikeltabel .rowb {
background:url(afb/blokag.jpg)
height: 25px;
}
#artikeltabel .cell {
padding: 0px;
border: 2px dotted #E05568;
vertical-align: top;
}

#artikeltabel .table { margin-left: auto; margin-right: auto;
}


Alvast bedankt.
knorretje
Berichten: 204
Lid geworden op: 8 augustus 2010, 11:37
    Windows Vista Firefox

Re: CSS: Verschillende tabellen in een div id

Bericht door knorretje »

Er zijn meerdere mogelijkheden.
Je kunt meerdere id-codes tegelijk instellen met het hekje #:
<table id="artikeltabel1" align="center">
<table id="artikeltabel2" align="center">
css: #artikeltabel1, #artikeltabel2 {width: 700px; etc}
Dit heet een Id-selector.

Je kunt de tabellen ook dezelfde klassenaam geven en dan de klassenaam instellen met de punt-notatie:
<table class="artikeltabelklasse" align="center">
<table class="artikeltabelklasse" align="center">
css: .artikeltabelklasse {width: 700px; etc}
Dit heet een class-selector.

Als de tabellen hetzelfde zijn, kun je ook gegevens instellen via het html-element <table> zelf:
css: table {width: 700px; etc}
Dit heet een Type-selector.

Nog een opmerking over css: #artikeltabel .rowa {
Als je zeker weet dat de "rowa"-klasse-elementen alleen in de tabellen voorkomen, dan kun je ze ook rechtstreeks selecteren:
css: .rowa { ... }

Leesvoer: http://www.w3.org/TR/CSS2/selector.html
Plaats reactie