Du har måske hørt, at CSS og HTML tabeller ikke blandes. Dette er ikke tilfældet. Ja, at bruge HTML-tabeller til layout er ikke længere en bedste praksis for webdesign, fordi de er blevet erstattet af CSS layout stilarter, men tabeller er stadig den korrekte markup til at bruge til at tilføje tabular data til en webside.
Fordi så mange webprofessorer er genert væk fra tabellerne, er de intet andet end problemer, men mange af disse fagfolk har lidt erfaring med at arbejde med dette fælles HTML-element, og de kæmper, når de skal tilføje interne linjer til bordceller på en webside.
CSS Tabelgrænser
Når du bruger CSS til at tilføje grænser til tabeller, tilføjer den kun grænsen udenfor bordet. Hvis du vil tilføje interne linjer til de enkelte celler i den tabel, skal du tilføje grænser til de indre CSS-elementer. Du kan bruge HR-mærket til at tilføje linjer inde i individuelle celler.
For at anvende de stilarter, der er omfattet af denne vejledning, skal du have en tabel på en webside. Derefter opretter du et stilark som et internt stilark i hovedet på dit dokument (hvis du kun beskæftiger sig med en enkelt side) eller vedhæftet dokumentet som et eksternt stilark (hvis webstedet har flere sider). Du sætter stilarterne for at tilføje indvendige linjer i stilarket.
Før du starter
Bestem, hvor du vil have linjerne i tabellen. Du har flere muligheder, herunder:
- Omgiver alle cellerne til at danne et gitter
- Placering af linjerne mellem kun kolonnerne
- Lige mellem rækkene
- Mellem bestemte kolonner eller rækker.
Du kan også placere linjerne omkring individuelle celler eller inde i individuelle celler.
Sådan tilføjes linjer rundt om alle cellerne i en tabel
For at tilføje linjer rundt om alle celler i dit bord, skaber du en gittereffekt, tilføj følgende til dit stylesheet:
td, th {border: solid 1px sort;} For at tilføje linjer mellem kolonnerne for at oprette lodrette linjer, der løber fra top til bund på bordets kolonner, skal du tilføje følgende til dit stylesheet: td, th {border-left: solid 1px black;} Hvis du ikke vil have lodrette linjer vist i den første kolonne, tilføjer du en klasse til th og TD celler. I dette eksempel antages en klasse af ingen af grænserne på disse celler og fjern grænsen med en CSS-regel. HTML-klassen du bruger er: class = "no-grænse"> Tilføj derefter følgende stil til stilarket: .no-grænse {grænse-venstre: none;} Som ved at tilføje linjer mellem kolonnerne, kan du tilføje horisontale linjer mellem rækker med en simpel stil, der er føjet til stilarket som følger: tr {border-bottom: solid 1px sort;} For at fjerne grænsen fra bunden af bordet, ville du igen tilføje en klasse til det tag: class = "no-grænse"> Tilføj følgende stil til dit stilark: .no-grænse {grænsebunden: ingen;} Hvis du kun vil have linjer mellem bestemte rækker eller kolonner, skal du bruge en klasse på disse celler eller rækker. Tilføjelse af en linje mellem kolonner er lidt sværere end mellem rækker, fordi du skal tilføje klassen til hver celle i den kolonne. Hvis dit bord automatisk genereres fra et CMS af en eller anden art, er det muligvis ikke muligt, men hvis du hånd koder siden, kan du tilføje passende klasser efter behov for at opnå denne effekt. class = "side-grænse"> Tilføjelse af linjer mellem rækker er lettere, fordi du kan tilføje klassen til den række, du vil have linjen på. class = "border-bottom"> Tilføj derefter CSS'en til dit stylesheet: .border-side {border-left: solid 1px black;}.border-bunden {border-bottom: solid 1px sort;} For at tilføje linjer omkring individuelle celler tilføjer du en klasse til de celler, du vil have en kant rundt: class = "grænse"> Tilføj derefter følgende CSS til dit stylesheet: .border {border: solid 1px sort;} Hvis du vil tilføje linjer inde i indholdet af en celle, er den nemmeste måde at gøre dette på med det vandrette regelmærke (). Hvis du bemærker huller i dine grænser, skal du sørge for, at grænsekollapsstilen er indstillet på bordet. Tilføj følgende til dit stylesheet: bord {grænsekollaps: sammenbrud} Du kan undgå alle og bruge grænsen attributten i din tabel tag. Vær dog klar over, at denne egenskab, mens den ikke er forældet, er signifikant mindre fleksibel end CSS, da du kun kan definere bredden af grænsen og kun kan have den omkring alle celler i tabellen eller ingen. Sådan tilføjes linjer mellem bare kolonnerne i en tabel
Sådan tilføjes linjer mellem lige rækker i en tabel
Sådan tilføjes linjer mellem bestemte kolonner eller rækker i en tabel
Sådan tilføjes linjer omkring individuelle celler i en tabel
Sådan tilføjes linjer inde i individuelle celler i en tabel
Nyttige tips
