Tabeller och Formulär

Det finns en del metoder, utöver de vanliga, att stilsätta tabeller. Tabellen nedan har bara de mest grundläggande: bakgrundsfärg och kantlinjer.

Tables växer ju beroende på den cellen som har det största innehållet. Detta är inte alltid bra för själva stilsättningen men det gör också att det tar längre tid att rita ut hela tabellen. Att det tar längre tid att rita ut tabellen är för att webläsaren måste veta hur långt det längsta innehållet är innan den kan börja rita ut så den måste gå igenom allt innehåll. För att lösa detta finns table-layout som kan ha två värden: auto som är standardvärdet och hur tabeller fungerar i allmänhet medans fixed sätter storleken efter storleken på själva tabellen och kolumnerna. Tabellen i exemplet ovan har en width på 250px. Om exakt samma tabell har fixed som table-layout så blir resultatet:

Storleken på cellerna är nu jämnt fördelade på den totala bredden av tabellen och inte anpassade efter sitt innehåll.

Tomma celler får som standard samma stilsättning som de med innehåll. Detta går att ändra med empty-cells som kan ta värdena: show som är standard (alltså att de visas) eller hide som är, precis vad det låter som, att cellen inte syns. Förutom detta kan man också se till att kantlinjerna i en tabell flyter ihop istället för att ligga separat brevid varandra. Detta görs med border-collapse som tar värdena: separate som är standard eller collapse som "kollapsar" kantlinjerna över varandra, alltså att de flyter ihop. Man kan också ange avstånden mellan kantlinjerna för celler. Detta görs med border-spacing som helt enkelt tar två längdvärden (10px 10px) där första är horisontellt och andra är vertikalt. Anger man bara ett värde så gäller detta för båda. Border-spacing och empty-cells fungerar inte om man har border-collapse satt till collapse utan de fungerar bara när det är satt till separate (eller inte alls eftersom detta är standardvärdet).

Nedan är samma tabell fast med en extra kolumn tillagd som har några tomma celler. Den har också border-collapse satt till collapse så att kantlinjerna ser lite bättre ut.

Om vi tar samma tabell fast tar bort collapse och lägger till att tomma celler inte ska visas och att det ska finnas lite extra utrymmer mellan cellerna blir resultatet:

Man kan också ange om titeln på tabellen (<caption>) ska hamna under eller över själva tabellen. Detta görs med caption-side attributet. Även om det kanske låter så på namnet så kan man inte ange höger eller vänster utan bara top eller bottom. Samma tabell fast med caption i botten:

För att stilsätta formulär så använder man egentligen inget som är unikt för just formulär. Man bör dock tänka lite extra på att det är viktigt att stilsättningen inte ska göra det svårare att förstå innehållet på just formulär för annars ökar chansen att användaren fyller i fel information. Många webläsare ger också en färgad outline på de input element som är markerade, alltså satta i fokus. Det går att stilsätta detta genom att ange pseudoklassen focused. I formuläret nedan är denna outline helt borttagen på de tre övre fälten men behålls på det nedersta. Anledningen att de togs bort på de översta är att de har rundade hörn och det går för tillfället inte att ge outline rundade hörn. Effekten som syns när dessa fält bli markerade är istället gjort med box-shadow. Förutom deetta så är stilsättningen gjord med metoder som är relativt enkla men när man får dem att fungera tillsammans så blir resultatet ganska bra: