Je hebt misschien gehoord dat CSS- en HTML-tabellen niet vermengen. Dit is niet het geval. Ja, het gebruik van HTML-tabellen voor lay-out is niet langer een beste manier om het webontwerp te gebruiken, omdat ze zijn vervangen door CSS-lay-outstijlen, maar tabellen zijn nog steeds de juiste opmaak die moet worden gebruikt om tabulaire gegevens aan een webpagina toe te voegen.
Omdat zoveel webprofessionals schrikken van tafels en denken dat ze niets dan problemen zijn, hebben veel van deze professionals weinig ervaring met dit algemene HTML-element, en ze worstelen wanneer ze interne lijnen moeten toevoegen aan tabelcellen op een webpagina.
CSS-tabelgrenzen
Wanneer u CSS gebruikt om randen toe te voegen aan tabellen, wordt alleen de rand aan de buitenkant van de tabel toegevoegd. Als u interne lijnen wilt toevoegen aan de afzonderlijke cellen van die tabel, moet u randen toevoegen aan de CSS-interieurelementen. U kunt de HR-tag gebruiken om lijnen in afzonderlijke cellen toe te voegen.
Voor het toepassen van de stijlen die in deze zelfstudie worden behandeld, hebt u een tabel op een webpagina nodig. Vervolgens maakt u een stijlpagina als een interne stijlpagina aan de kop van uw document (als u te maken hebt met slechts één pagina) of als een externe stijlpagina aan het document gehecht (als de site meerdere pagina's bevat). Je zet de stijlen om binnenregels toe te voegen aan de stylesheet.
Voordat je start
Bepaal waar u de regels wilt weergeven in de tabel. Je hebt verschillende opties, waaronder:
- Om alle cellen heen om een raster te vormen
- De lijnen tussen alleen de kolommen plaatsen
- Gewoon tussen de rijen
- Tussen specifieke kolommen of rijen.
U kunt de lijnen ook rond afzonderlijke cellen of binnen afzonderlijke cellen plaatsen.
Hoe voeg ik regels toe rond alle cellen in een tabel
Als u regels rond alle cellen in uw tabel wilt toevoegen en een rastereffect wilt maken, voegt u het volgende toe aan uw stylesheet:
td, th {rand: vast 1px zwart;} Als u lijnen tussen de kolommen wilt toevoegen om verticale lijnen te maken die van boven naar beneden in de kolommen van de tabel lopen, voegt u het volgende toe aan uw stylesheet: td, th {border-left: solid 1px zwart;} Als u geen verticale lijnen wilt weergeven in de eerste kolom, voegt u een klasse toe aan th en td cellen. Neem in dit voorbeeld een klasse aan van geen grens op die cellen en verwijder de rand met een CSS-regel. De HTML-klasse die u gebruikt, is: class = "no-border"> Voeg vervolgens de volgende stijl toe aan de stylesheet: .geen grens {border-left: none;} Net als bij het toevoegen van lijnen tussen de kolommen, kunt u als volgt horizontale lijnen tussen rijen toevoegen met één eenvoudige stijl aan het stijlblad toegevoegd: tr {border-bottom: solid 1px zwart;} Om de rand van de onderkant van de tabel te verwijderen, zou je er weer een klasse aan toevoegen label: class = "no-border"> Voeg de volgende stijl toe aan je stylesheet: .geen grens {border-bottom: none;} Als u alleen regels tussen specifieke rijen of kolommen wilt, moet u een klasse op die cellen of rijen gebruiken. Een regel tussen kolommen toevoegen is iets moeilijker dan tussen rijen omdat u de klasse aan elke cel in die kolom moet toevoegen. Als uw tabel automatisch wordt gegenereerd met een CMS van een bepaalde soort, is dit misschien niet mogelijk, maar als u de pagina met de hand codeert, kunt u desgewenst de juiste klassen toevoegen om dit effect te bereiken. class = "side-border"> Het toevoegen van regels tussen rijen is eenvoudiger omdat u de klasse kunt toevoegen aan de rij waarop u de regel wilt plaatsen. class = "border-bottom"> Voeg vervolgens de CSS toe aan uw stylesheet: .border-side {border-left: solid 1px zwart;}.border-bottom {border-bottom: solid 1px zwart;} Als u regels rond afzonderlijke cellen wilt toevoegen, voegt u een klasse toe aan de cellen met een rand eromheen: class = "border"> Voeg vervolgens de volgende CSS toe aan uw stylesheet: .border {rand: vast 1px zwart;} Als u regels wilt toevoegen aan de inhoud van een cel, is de gemakkelijkste manier om dit te doen met de tag horizontale regel (). Als u gaten in uw grenzen ontdekt, moet u ervoor zorgen dat de stijl voor het samenvouwen van randen in de tabel is ingesteld. Voeg het volgende toe aan uw stylesheet: tafel {border-collapse: collapse;} U kunt alle voorkomen en het kenmerk border gebruiken in uw table-tag. Realiseer u echter dat dit kenmerk, hoewel niet verouderd, aanzienlijk minder flexibel is dan CSS, omdat u alleen de breedte van de rand kunt definiëren en deze alleen rond alle cellen van de tabel of geen enkele kunt hebben. Lijnen toevoegen tussen alleen de kolommen in een tabel
Lijnen toevoegen tussen alleen de rijen in een tabel
Lijnen tussen specifieke kolommen of rijen in een tabel toevoegen
Lijnen rond individuele cellen in een tabel toevoegen
Hoe lijnen binnen afzonderlijke cellen in een tabel kunnen worden toegevoegd
Bruikbare tips
