Om du använder tabeller för sidlayout (ett nej-nej i XHTML), det är troligt att du kommer att uppleva det fula tillägget av extra utrymme i dina layouter. För att åtgärda problemet måste du kontrollera både din HTML-tabelldefinition och specifikationerna för alla styrformat.
HTML-tabelldefinition
HTML märka för tabeller som standard inte styr för vissa avståndskrav. Kontrollera tre saker om tabell tagg i ditt HTML-dokument:
- Har din tabell attributet cellfyllning satt till 0?
cellpadding = "0"
- Har din tabell cellavståndsattribut satt till 0?
cellspacing = "0"
- Finns det några mellanslag före eller efter ditt innehåll och tabellens taggar?
Nummer 3 är kickern. Många HTML-redigerare gillar att ha koden överallt, för att göra det lätt att läsa. Men många webbläsare tolkar dessa flikar, mellanslag och vagnreturer som önskat extra utrymme i dina bord. Bli av med det vita utrymmet som omger dina taggar så får du skarpare tabeller.
Stilark
Det kan dock inte vara HTML som är avstängd. Kaskad stilark
kontrollerar vissa visningsattribut för tabeller och beroende på sida har du kanske eller inte medvetet lagt till tabellspecifik CSS i första hand.Skanna den styrande CSS-filen efter något av följande värden i tabell, th, eller tdegenskaper och justera efter behov:
- gräns: Anger attributen för en tabell eller cellgräns
- gräns-kollaps: Behandlar intilliggande gränser som en, för att undvika att duplicera kantbredder
- stoppning: Erbjuder tomt utrymme i pixlar runt varje cell
- textjustera: Bestämmer justering av text inom cellen
- gränsavstånd: Ställer in avståndet mellan celler i pixlar
Alternativ
Även om du fortfarande kan använda HTML-tabeller (standarden är väletablerad och stöds allmänt i dagens webbläsare), mest moderna responsiva webbdesign använder kaskadformat för att placera element på en sida. Tabeller är fortfarande meningsfulla för deras ursprungliga avsedda syfte att visa tabelldata, men för att organisera layout och innehåll på en sida är du mycket bättre att använda CSS-layout istället.