Om du använder tabeller för sidlayout (ett nej i XHTML är det troligt att du kommer att uppleva det fula tillägget av extra utrymme i dina layouter. För att åtgärda detta problem måste du kontrollera både din HTML-tabelldefinition och specifikationen för någon styrande stilark.
HTML-tabelldefinition
HTML-taggen för tabeller som standard kontrollerar inte för vissa avståndskrav. Verifiera tre saker om tabellen "bord" i ditt HTML-dokument:
- Har ditt bord den cellpadding attributet satt till 0?
-
cellpadding = "0"
-
- Har ditt bord cellspacingattributet satt till 0?
-
cellspacing = "0"
-
- Finns det några mellanslag före eller efter innehållet och tabellens taggar?
Nummer 3 är kickern. Många HTML-redaktörer tycker om att koden är helt åtskild för att göra det lätt att läsa. Men många webbläsare tolkar de flikar, mellanslag och vagn som återkommer som önskat extrautrymme i dina bord. Bli av med whitespace kring dina taggar och du får skarpare tabeller.
Stilark
Det kan dock inte vara den HTML som är avstängd. Kaskad stilark kontrollerar vissa visningsattribut av tabeller och beroende på sidan kan du eller inte avsiktligt lägga till tabellspecifik CSS i första hand.
Skanna den styrande CSS-filen för något av följande värden i "tabellen" ,' ' th "eller ' td" egenskaper och justera efter behov:
- gräns: Anger attributen för en tabell eller en cellgräns
- border-kollaps: Behandlar intilliggande gränser som en, för att undvika duplicering av kantbredder
- stoppning: Erbjuder tomt utrymme, i pixlar, runt varje cell
- text-align: Bestämmer inriktningen av texten i cellen
- border-avstånd: Ställer in mellanrum mellan celler, i pixlar
alternativ
Även om du fortfarande kan använda HTML-tabeller (standarden är väletablerad och stöds universellt i dagens webbläsare) använder den mest moderna responsiva webbdesignen kaskad stilark för att placera element på en sida. Tabellerna är fortfarande viktiga 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.
