Varför tabeller för layout är dumt:

problem definieras, lösningar erbjuds

Tabeller existerade i HTML för en anledning: För att visa tabulärdata. Men sen kom border="0" som gjorde det möjligt för designers att skapa ett rutsystem för att placera text och bilder. Fortfarande det dominerande sättet att formge visuellt avancerade webbsajter, börjar nu användandet av tabeller att störa byggandet av en bättre, flexiblare, mer åtkomlig och funktionell webb. Läs om varifrån problemen härstammar och lär dig lösningar för att skapa övergångs- eller helt tabellösa layouter.

Hämta chefen

Finns det några "kostymer" i publiken? Är era chefer här på Seybold, men sitter på ett annat seminarium just nu? Hämta dem. Det är de som behöver få veta hur Webbstandarder kan spara ert företag pengar.

Översikt: Vad ger det mig?

Vi ska ge er en introduktion till ett sätt att jobba som kommer att

Vi kommer också att prata om hur sidlayout med Cascading Style Sheets (CSS) kräver ett något annorlunda sätt att tänka vad gäller innehåll och kod än vad ni kanske är vana vid.

Grymma sajter: nästlade tabeller och osynliga GIF-bilder

I begynnelsen, var internet primärt ett medium för academiker, forskare, och armén att utbyta information. Det tog inte lång tid för visionära entreprenörer att inse att detta nya medium var idealiskt för att sälja allt ifrån färska grönsaker och hundmat till begagnade bilar och direktsända sportevenemang.

Dock var det tidiga internet, som vilket annat medium som helst i sin barndom, estetiskt ‘rått’ (och inte särskilt lockande för konsumenter) ända till David Siegel publicerade sin succébok, som erbjöd några smarta knep för att kringgå begränsningarna i de webbläsare och W3C-specifikationer som fanns omkring 1997. (Vi snackar alltså Netscape 2 och 3 här.)

Dessa knep var i själva verket så smarta att de fortfarande är de förhärskande sätten att layouta webbsidor idag.

Problemet med att använda tabeller:

Frälsningen är här

Moderna webbläsare är mycket bättre på att rendera Webbstandarder och vi behöver inte använda oss av de där ålderdomliga metoderna längre.

Istället för att nästla tabeller inuti tabeller och fylla ut tomma celler med osynliga GIFar, kan vi använda mycket enklare kod och CSS för att layouta vackra sajter som går snabbare att ladda, är lättare att designa om, och mer tillgängliga för alla.

Lösningen: CSS och strukturell kod

Genom att använda strukturell kod i våra HTML-dokument och Cascading Style Sheets för att layouta våra sidor, kan vi hålla det faktiska innehållet på våra sidor separerat från sättet det presenteras på.

Detta har flera fördelar över att använda tabeller...

Redesigns är lättare och billigare

Genom att ta bort presentationskod från våra sidor, blir redesigns av existerande sajter och innehåll mycket mindre arbetsintensivt (och mycket billigare). För att förändra layouten på sajten, är allt du behöver att ändra stilmallarna; du behöver inte redigera själva sidorna överhuvudtaget.

Som exempel, ta en titt på CSS Zen Garden, eller stilmallbytaren på Eric Meyers sajt. För att läsa på mer, se Alternative Style av Paul Sowden.

Bandbredd är inte gratis

Genom att använda Webbstandarder minskas filstorleken på dina sidor, eftersom besökare inte längre behöver ladda ner presentationsdata för varje sida de besöker. Stilmallarna som kontrollerar layouten cachas i läsarens webbläsare.

Reducerad filstorlek betyder snabbare sidladdningar och minskade hosting-kostnader.

Men, de här sidorna ser ju likadana ut!

Att använda Webbstandarder gör det också extremt enkelt att upprätthålla visuell samstämmighet genom en sajt. Eftersom sidorna använder samma CSS-dokument för sin layout, får de alla samma format.

Detta stärker ditt varumärke och gör din sajt mer användbar.

Koda en gång, för alla, överallt

Att använda Webbstandarder gör våra sidor mycket mer tillgängliga för användare med olika typer av handikapp och för läsare som använder mobiltelefoner och PDAs för att nå webben.

Läsare som använder skärmuppläsare (såväl som de med långsamma uppkopplingar) behöver inte vada genom oräkneliga tabellceller och utfyllningar för att nå den faktiska informationen på våra sidor.

Med andra ord, att separera innehåll från sättet det presenteras på gör vårt innehåll apparat-oberoende.

Google är blind

På tal om tillgänglighet, att slimma kod och använda rubrik-taggar riktigt kommer också se till att förbättra rankningen i sökmotorer.

Att minska andelen kod per innehåll, använda nyckelord i rubrikerna och ersätta rubrik-GIFar med verklig text, kommer alltsammans att hjälpa era sajter att få bättre sökmotorresultat.

Du kan fortfarande använda tabeller om du behöver, använd bara inte så många

Detta kommer att ge läsare (och chefer) som är dömda till att använda version 4-webbläsare tills den dag de dör en acceptabel uppskattning av vad resten av världen ser.

En tillräckligt vacker tabell

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
• At vero eros et accumsan et iusto odio dignissim qui blandit
• Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
• Epsum factorial non deposit quid pro quo hic escorol.
• Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
• Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
• Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Ta en titt under ytan

Detta kunde verkligen göras på ett mycket enklare sätt. Gissa hur mycket kod det finns i denna lilla tabell? 13,7kb. Det är 17 rader och 9 kolumner här inne. Och nämnde jag alla utfyllnads-GIFar?
Det är alldeles för många tabellceller och utfyllnadsbilder här inne. Och alla prickade linjer görs med ett background-attribut på tabellcellerna, vilket inte kommer att validera.
• En nästlad tabell? Till vad?
• För att göra en punktlista? Du skojar, va?
Allt detta skulle kunna göras med 8 tabellceller och 4 CSS-regler. Allvarligt. 8 celler och 4 CSS-regler, det är allt som behövs.
• Ånej, ännu en tabell förklädd till punktlista.
• Koda upp punklistorna som punklistor och låt CSS sköta resten.
Du behöver en regel för <table>, en för <td>, en för <ul> och en för <li>. Det är allt. När du väl har dem är allt lugnt.
• Det är bättre än att använda 8 ytterligare tabellceller för att fejka en punktlista, vilket i slutändan är mycket mindre tillgängligt.
• Lysande! Den sista fejkpunkten.

Koden som visar tabellstrukturen:

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }

Mycket bättre

Mycket bättre Gissa hur mycket kod det är i den här lilla tabellen? 2,1kb. Denna består av 4 rader och 2 kolumner. Och inga utfyllnads-GIFar.
Helt rätt Och alla dessa prickade linjer är gjorda med CSS och validerar helt och hållet.
  • Detta är ett listobjekt nu
  • Precis som det ska vara
Allt detta görs med 8 tabellceller och 4 CSS-regler. Allvarligt. 8 celler och 4 CSS-regler, det är allt som krävs.
  • Hurra för punktlistor
  • Varför inte koda upp alla punktlistor som punktlistor och låta CSS sköta resten?
Du behöver en regel för <table>, en för <td>, en för <ul> och en för <li>. Det är allt. När du väl har det är allt lugnt.
  • Jag älskar punktlistor
  • Lysande! Inga fler fejkade punkter

Och här är CSS-koden som används för att slippa överflödskoden:

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }

Översikt över övergångsdesign

Använd 'margin' och 'padding' istället för extra celler och utfyllnads-GIFar.

Använd 'link' och '@import' för stilmallar. Den första för gamla webbläsare, den andra för moderna webbläsare.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Exempel från verkliga livet:

Men vänta, det kommer mera:

För mer information om övergångsdesign, se kapitel ett i Eric Meyer on CSS och stora delar av Jeffrey Zeldmans Designing with Web Standards.

CSS-layouter: Framtiden är här

Webbläsarna som det stora flertalet läsare har idag har bra CSS-stöd. De har alla sina småbrister, men när man väl vant sig vid dem, kan man kringgå dem.

Att koda CSS är enkelt. Även för en som mig som tycker att de flesta JavaScript ser ut som svärord.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Varje CSS-regel har en väljare och en förklaring. Förklaringen består av en egenskap och ett värde. Egenskaper som låter som om de skulle vara två ord skrivs med bindestreck.

body { margin:0; padding:0}

.related { float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}

#footer { color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}

Strukturerad kod: koda vad du menar, mena vad du kodar

Att skriva själva CSS-koden är enkelt, att använda CSS till att göra sidlayouter kräver en något annorlunda sätt att tänka än de flesta av oss förmodligen är vana vid.

Hellre än att se saker som "detta kommer här och detta kommer där" medan vi jobbar med en sida eller en layout, behöver vi tänka på typen av information på vår sida och på strukturen på den informationen.

Vi ger den viktigaste rubriken en <h1>-tagg; underrubriker märks upp med <h2>-taggar, etc.; och stycken som just stycken.

Detta är vad som brukar kallas för "strukturell" eller "semantisk" kod.

Istället för att placera innehållet i tabeller och tabellceller, slå in det i div-element. Ge div-elementen ett id eller en class som beskriver dess innehåll och/eller funktion, snarare än dess framträdande.

Undvik <b>ed and <br>eakfast-kod

Tänk igenom varför du vill att en sak ska se ut på ett visst sätt; vad betyder det? Din kod kan och ska förmedla innebörd, även till någon som inte kan se din sida. Semantisk kod gör dina sidor mer tillgängliga för alla, inklusive sökmotorer.

När du kursiverar någonting, är det för att du vill betona det, <em>, eller för att det är en boktitel, <cite>?

Om någonting är kraftigt, borde det förmodligen märkas upp som <strong>.

Om du vill ha en radbrytning efter någonting, är cansen stor att det borde märkas upp som en rubrik. Om det inte är en rubrik, är det då del av en class som förekommer genom hela sajten? Om så är fallet så använd CSS istället för <br>.

.foo { display:block}

För att läsa mer, se Bed and BReakfast markup (B&BR) av Tantek Çelik.

Vad är navigeringsmenyer?

Tänk på saken: din navigering är i själva verket en oordnad lista med länkar.

Märk upp dem inuti <ul>-taggar.

Horisontell navigering

Vi kan använda CSS för att kontrollera hur dessa listor visas på våra sidor.

Genom att använda display:inline kan vi skapa horisontella navigeringsmenyer.

Här är koden som används för denna navigering:

#nav1{
margin-top: 1em;
margin-bottom: 0.5em;
}

#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}

#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}

#nav1 li:first-child {
border: none;
}

Vertikal navigering

Här är koden för denna:

#nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}

#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}

#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li {
width: auto;
}

#nav2 li:first-child {
border: none
}

För mer information, se Mark Newhouses artikel, Taming lists, på A List Apart, och "Styling lists" i CSS-Discuss-wikin.

Saker tabeller gör bättre än CSS

Det finns vissa saker som CSS inte gör lika bra som tabellayouter.

Till exemepel, låt säga att du har en svart sidspalt som du vill sträcka ut hela vägen ner längs innehållet. Med en tabellayout är detta en baggis: ge bara den där <td>-cellen en svart bakgrund.

Vi kan göra detta med CSS också, men det kräver ett annat sätt att tänka.

Om vi ger vår navigerings-div en svart bakgrund kommer det svarta bara att sträcka sig ner till stället där menyn 'tar slut'. På de flesta sidor är innehållet längre än sidnavigeringen, så detta är inget bra.

Istället skulle vi kunna stapla en svart GIF i vår innehålls-div och ge denna div nog med utfyllnad till vänster, men om vår navigering är längre än vårt innehåll så funkar inte detta heller.

Ett annat sätt att tackla detta är att stapla den svarta GIF:en som bakgrund till vår <body>, vilket funkar fint såtillvida du inte vill använda en annan bild som backgrund till din <body>.

Eller så kan vi slå in vårt innehåll i en 'omslags'-div och stapla bilden i den div:en. Dock är detta att lägga till ickesemantiskt trassel till vår kod.

Dessutom, att stapla bakgrundsbilder kommer överhuvudtaget inte att funka om du vill att bredden på din spaltnavigering ska vara obestämd.

Som vi sa, det finns vissa saker som tabeller gör bättre än CSS. Men i slutändan måste du fråga dig om allt 'bagage' som kommer med användandet av tabeller för layout, istället för till data, är värt det.

Migrera från tabellhack till Webbstandarder: En översikt

Först måste du bestämma dig för en migreringsstrategi. Kommer du att migrera hela sajten på en gång, eller kommer du göra det sektion för sektion?

Identifiera de sektioner och sidor som mest kommer att gynnas av konverteringen. Startsidor, annonsplatser för nya produkter och liknande sidor är en naturlig plats att börja arbetet på.

Identifiera de typer av innehåll/information din sajt har i sin helhet

Bryt ner dina sidor

När du väl har fått dig en överblick över typerna av innehåll på din sajt, är det dags att analysera dina existerande sidor och leta efter logiska indelningar av innehåll.

Analysera din tabellstruktur och leta efter nästlade tabeller och tomma utfyllnads- och linjeceller. (Vi vill ersätta dem med div-taggar eller med en mycket enklare tabellstruktur.)

Titta på din kod

När du väl analyserat strukturen på dina sidor är det dags att ta en titt under ytan och analysera existerande HTML-kod och leta efter presentationskod som kan ersättas med strukturell kod.

Ersätt presentationstaggar med strukturell kod

Du kan använda sök och ersätt (och reguljära uttryck), men det enklaste sättet att göra det på kan vara att se på din existerande sida i en webbläsare och kopiera och klistra in texter därifrån in i en HTML-editor.

Tänk på strukturen på ditt dokument! Att bara ersätta <b>-taggar med <strong>-taggar är inte nog.

Vilken är den viktigaste rubriken? Märk upp den med en <h1>-tagg. Märk upp underrubriker med <h2>-taggar och så vidare. Märk upp stycken med <p>-taggar. Märk upp din navigering som oordnade listor.

Välj en DOCTYPE använd den. (Vi rekommenderar XHTML Transitional, såtillvida du inte är hardcore, i så fall, använd XHTML Strict.)

Dela upp din sida i logiska div:ar

Sätt din huvudsakliga navigering i en div med ett id som till exempel 'mainnav'; sätt dina undermenyer i en div med ett id eller en class kallad 'subnav', sätt din sidfot i en <div id="footer">, och inneslut allt innehåll i en <div id="content">.

Det ser inte så mycket ut för världen nu, men när du väl bärjar lägga till regler till dina stilmallar, kommer saker och ting fort bli bättre.

Det är dags att börja skriva din CSS-kod

Till att börja med, ge varje div en kantlinje. Exempel: div { border: 1px dotted gray; padding: .5em }. Detta kommer hjälpa dig att se var de börjar och slutar, och också om de är nästlade eller inte.

Skriv CSS-koden för segmentsväljare först (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, osv)

Använd så mycket som möjligt väljare som indikerar sammanhang eller 'arv'. Detta kommer göra din kod mycket renare. Exemplet #subnav li { border: 1px solid black; padding: 0.5em; display: inline } kommer bara påverka listobjekt som finns inuti din subnav div.

Testa i så många webbläsare som möjligt och be vänner att testa i sina webbläsare.

Exempel på sajter som är layoutade med CSS

Läs allt om saken

Av uppenbarliga skäl kan vi inte täcka allt du bhöver veta om CSS-design inom loppet av en timme, men dessa böcker kan hjälpa dig att greppa hur du använder Webbstandarder för att göra dina sidor lättare, renare och snabbare.

Papper? Vi behöver inget illaluktande papper: Online-resurser

CSS-Discuss

zeldman.com The Daily Report: Insightful, thought-provoking, and well-written content and links served up regularly

A List Apart: For people who make Web sites

The Webstandards project Bless these people.

CSS: A guide for the unglued A great links page

CSS Layout Techniques: for Fun and Profit Layouts that you can use in your projects from Eric Costello. Resources and tutorials, too.

Real World Style CSS layouts, tips, tricks, and techniques from Mark Newhouse.

The Business Benefits of Web Standards Good news for modern suits. The gospel of Web standards presented in terms that an MBA can appreciate.

Tack. Några frågor?

; Scott Design, Inc.

; Adobe Systems Incorporated

Anton Andreasson ; Standardice (övers.)

Don't blame us!

Even though we did our best translating this thing, you still might want to read the original English version.

Andra internationella versioner

Creative Commons LicenseThis work is licensed under a Creative Commons License.