How To Make tabellen in CSS

How To Make tabellen in CSS


Het creëren van tabellen met behulp van Cascading Style Sheets (CSS) is een geavanceerde manier van weergeven van gegevens of een pagina-indeling maken. CSS kunt u maken van schonere code, die resulteert in sneller laden van de pagina en kunt u meer van een aangepaste tabel maken. Met behulp van een eenvoudige HTML-geordende lijst, toekent CSS stijlregels aan elk onderdeel om te definiëren hoe uw tabel weergeven en presenteren van uw inhoud. Stijlregels kunnen op maat kunt maken van alle soorten tabellen, van eenvoudig tot complex.

Instructies

CSS-Code

1

Open een nieuw document in een HTML-teksteditor, zoals BBEdit of Dreamweaver.

2

Maak een klasse stijlregel genaamd ".table". Deze regel definieert van uw tabel lettertype. Bijvoorbeeld:
.table {}

font-family: Verdana, Arial, Helvetica, sans-serif;

}

3

Maak een klasse stijlregel genaamd ".table ul". Deze regel definieert de niet-geordende lijst marge, opvulling, float en rand. Bijvoorbeeld:
.table ul {}

margin: 0px;
padding: 0px;
float: left;
border-top: 0px none;

}

4

Maak een klasse stijlregel genaamd ".table ul li". Deze regel definieert het lijstitem opvulling list-style-type, achtergrondkleur, lettertype grootte, onderrand, tabel breedte en achtergrond kleur. Bijvoorbeeld:
.table ul li {}

padding: 5px 5px 10px 10px;
list-style-type: none;
background-color: #CCCCFF;
font-size: 14px;
border-bottom: 1px solid #FFFFFF;
width: 150px;
color: #000033;

}

5

Maak een klasse stijlregel genaamd ".table ul li.heading". Deze regel definieert de lijst kop de lettertype-eigenschappen, achtergrond kleur en onderste rand. Bijvoorbeeld:
.table ul li.heading {}

font-weight: bold;
color: #333366;
background-color: #9999CC;
text-transform: uppercase;
font-size: 16px;
border-bottom: 1px solid #FFFFFF;

}

6

Een naam geven en opslaan van uw CSS-bestand met de extensie "CSS".

7

Link uw CSS-bestand naar uw HTML-code door uw HTML-document openen en toevoegen van een link in "head"-element van het document. Bijvoorbeeld:
< link href = "http://www.yoursite.com/table.css" rel = "stylesheet" type = "text/css" media = "all" / >

HTML-Code

8

Voer de openingstag "< div >" en de regel van de klasse "tabel" toevoegen. Daardoor wordt de stijl van de tabel toegewezen. Bijvoorbeeld:
< div class = "tabel" >

9

Voer de opening "< ul >" tag list ongeordend. Dit begint de eerste kolom van de tabel.

10

Voer de opening "< li >" tag lijstitem en de regel van de klasse "koppen" toevoegen. Daardoor wordt de lijst kopopmaakprofiel toegewezen. Bijvoorbeeld:
< li klasse = "koppen" >

11

Het item in de lijst tekst invoeren en sluit de "< /li >" tag. De tekst is uw eerste kolomkop. Bijvoorbeeld:
< li klasse "koppen" = > kolom 1 < /li >

12

Voer zoals velen item Labels lijst als nodig. De tekst wordt ingevoerd in deze items in de lijst is de gegevens die worden weergegeven onder de kolom. Bijvoorbeeld:
< li > rij 1, kolom 1 < /li >
< li > rij 2, kolom 1 < /li >
< li > rij 3 in kolom 1 < /li >

13

Voer de sluitingscode "< /ul >" om te voltooien van de eerste kolom van de tabel.

14

Herhaal stap twee, drie en vier extra kolommen en rijen toevoegen aan uw tabel, als nodig. Bijvoorbeeld:
< ul >
< li klasse "kop" = > kolom 2 < /li >
< li > rij 1, kolom 2 < /li >
< li > rij 2, kolom 2 < /li >
< li > rij 3 in kolom 2 < /li >
< /ul >

15

Voer de sluiting "< / div >" tag.

16

Een naam geven en opslaan van uw HTML-bestand met de extensie ".html".

Tips & waarschuwingen

  • U kunt extra stijl specificaties, zoals tekengrootte of kleur, in elke CSS-regel. Als u de CSS-regels die van kracht niet wordt weergegeven, controleert u of dat beide bestanden zijn opgeslagen en vervolgens uw HTML-teksteditor "Refresh" functie gebruiken.