Hvordan ha en HTML-tabell med en ramme rundt det, men ikke rundt radene

May 3

Selv om HTML tabellkoder kan ta en egenskap av "border," dette attributtet gjelder bare for hele tabellen, og vil legge til rammer rundt alle cellene i tabellen. Siden grensen attributtet anses foreldet uansett, bruke Cascading Style Sheets (CSS) kode for å definere rammestiler for noen del av HTML-basert bord.

Bruksanvisning

1 Åpne HTML-fil som inneholder tabellen i ren tekst eller kode editor av ditt valg. Gode programmer inkluderer Notepad ++, Bbedit og jEdit, men den gamle standby av Notepad i Windows fungerer også.

2 Finn tabellen koder i HTML-filen. Alle tabeller starte med <table> -taggen og avslutte med </ table> tag. Mellom disse taggene, definerer <thead> overskriften delen <tbody> definerer bordet kroppen og <tr> tags definere rader. Enkelt celle data blir innpakket i <td> og </ td> koder. Disse kodene er ikke så viktig her, men siden du trenger bare å sette en stil for <table> -taggen.

3 Legg til <style> og </ style> koder i HTML-fil <head> taggene. Innenfor disse kodene, skriver du inn følgende CSS stil regel: table {border: 1px solid black;}. Denne regelen sier at alle tabeller på websiden få en ett-piksel-bred, solid-svart ramme. Switch "svart" i eksempelet gitt til noen som heter fargen (av de 256 "Web-safe" farger) eller fargens heksadesimale koden, som du kan få hjelp av en fargevelger. Tilgjengelige grense stiler inkluderer solid, prikkete, stiplede, double, groove, ridge, innfelt og begynnelsen.

4 Legg til en ny stil regel med samme kode, men bytter ordet "bord" til hvilken annen tabell tag du ønsker å målrette. For å legge til rammer bare rader, for eksempel endring "bord" til "tr" i eksempelet.

5 Rediger HTML-fil bord tag til å lese "<table id = 'din-id-navnet"> "for å gi tabellen en ID. For å målrette bare det bestemt tabell i CSS-kode, bytter ordet "bord" i CSS-koden eksempel for å "# your-id-navn". Legg til et kurs i stedet for en ID til bordet hvis du ønsker å målrette en gruppe av tabeller i stedet. I CSS, foran navnet på klassen med en prikk i stedet for spredefunksjonen symbol.

Hint

Som nettleser støtte for CSS3 stil regler øker, kan du prøve å bruke nye grense egenskaper som border-radius og border-image. I øyeblikket, men ikke alle nettlesere støtter disse.
Fjern avleggse attributter av "grensen" eller "cellpadding" fra HTML tabellkoder. Disse forstyrrer CSS-stiler, og ikke gjengi på en forutsigbar måte på tvers av alle nettlesere.