Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Transkript

1 Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition har tabeller använts för att visa sifferdata (som talvärden) i rader och kolumner. Flexibiliteten hos HTML gör emellertid att webbutvecklare kan skapa tabeller som innehåller mer än bara siffervärden. Även om det är viktigt att kunna visa tabelldata, är möjligheterna att kunna styra layouten för andra element i dokumentet (som text och bilder) lika viktigt om inte viktigare. Tabell Ett arrangemang med vågräta rader och lodräta kolumner. Skärningen mellan en rad och en kolumn kallas för en cell. Varning Även om tabeller i HTML ser ut som i ditt favoritkalkylprogram utför HTML-tabellerna inte några matematiska beräkningar. HTML-tabeller är inte svåra att skapa, men de kräver en viss organisation. Alla HTML-tabeller börjar med taggen <table> och avslutas med taggen </table>. Mellan dessa taggar finns ytterligare tre taggar som man bör känna till, nämligen: <tr> anger en vågrät rad. <td> anger en datacell på denna rad. <th> anger att en datacell är en tabellrubrik. I nyare webbläsare formateras en tabellrubrikcell som centrerad och i fetstil.

2 Tabeller 69 Kom ihåg att webbläsare ignorerar alla mellanslag, tabbar och tomma rader som finns med i HTML-dokumentet. Därför kan du använda mellanslag hur mycket du vill för att hålla reda på tabelltaggarna. I bild 7.1 visas tillräckligt med mellanslag mellan taggarna så att man kan se hur rader och kolumner ligger. Det blir enklare att se att man inte glömmer någon tagg. I bild 7.2 visas hur tabellen ser ut i webbläsaren. BILD 7.1 En enkel HTML-tabell med två kolumner och tre rader. BILD 7.2 Samma HTML-tabell som den ser ut webbläsaren. Formatera tabeller Nu kan du snygga upp den enkla tabellen lite. I tabell 7.1 visas några av de stilattribut som kan användas för HTML-tabeller. I bild 7.3 visas hur man kan använda dessa attribut för att skapa en HTML-tabell med lite mer karaktär. Bild 7.4 visar hur tabellen ser ut i webbläsaren.

3 70 Lektion 7 Tips På webbplatsen för World Wide Web Consortium (www. w3.org/tr/rec-html40/struct/tables.html) finns detaljerade beskrivningar av alla attribut som kan användas för tabeller, tillsammans med exempel på hur de kan användas. TABELL 7.1 Stilattribut för tabeller Attribut Standard För Värden align left Alla Vågrät justering av cellinnehåll: left, right, center och char (som justerar till ett speciellt tecken, t.ex. ett decimalkomma). bgcolor Alla Bakgrundsfärg. border 0 <table> Kantbredd (i pixlar). cellpadding 0 <td>, <th> Avstånd mellan kantlinje och cellinnehåll (i pixlar). cellspacing 0 <td>, <th> Avstånd mellan celler (i pixlar). colspan 1 <td>, <th> Antal kolumner en cell ska gå över (slås ihop). rowspan 1 <td>, <th> Antal rader en cell ska gå över (slås ihop). rules inga <table> Där linjer (linjaler) visas mellan celler: rows, cols eller all. valign center <td>, <tr>, Lodrät justering av cellinnehåll: <th> top, bottom eller baseline. width to fit All Bredd på tabell eller celler (i pixlar eller som en procentsats av sidan).

4 Tabeller 71 Pixel En pixel (sammandragning av picture element, bildelement) är storleken på en enda färgpunkt på bildskärmen. Bildskärmens upplösning påverkar storleken av pixeln. En skärmupplösning på betyder att skärmen visar 800 pixlar i bredd och 600 pixlar på höjden. Pixelstorleken i en bildskärm med upplösningen är mycket mindre än på en skärm med upplösningen En tabell med attributet width satt till 800 pixlar fyller hela skärmbredden på en skärm med upplösningen , men bara en del av en skärm som har upplösningen BILD 7.3 Tabellattribut i HTML. BILD 7.4 Samma HTML-tabell som den visas i webbläsaren.

5 72 Lektion 7 Avancerade tabeller HTML innehåller ytterligare två attribut som du kan använda när du formaterar tabeller. Attributen colspan (som gör att en cell går över två eller flera kolumner) och rowspan (som gör att en cell går över två eller flera rader) är användbara när man skapar komplexa tabeller även om, vilket syns i HTML-koden i bild 7.5, det blir svårare att hålla ett HTML-dokument välordnat. I bild 7.6 visas hur tabellen ser ut i en webbläsare. BILD 7.5 Använd attributen colspan och rowspan för att skapa mer komplexa tabeller. BILD 7.6 Samma HTML-tabell som den ser ut webbläsaren.

6 Tabeller 73 Tabeller för layout Om du tittar på källkoden hos några av dina favoritwebbsidor slår jag vad om att du kommer att se att de gjordes med hjälp av tabeller. Här är några webbsidor som jag tycker är bra och som använder tabeller för att styra layouten på sidan: Kolumnen med sökkategorier är skapad med tabeller. Denna webbplats är i princip en tabell med tre kolumner. Microsoft använder också tabeller för att göra layouten på sin webbsida. Webbplatsen American Idol Web visar ett annat kreativt sätt att använda tabeller i sin layout. Tips Även om du inte tänker lägga in någon kantlinje omkring cellerna i din tabell är det mycket lättare att se hur kommandona tolkas i webbläsaren om kantlinjer är inkopplade (<tabell border= 1 >). När du är nöjd med hur tabellen är formaterad och innehållet är där du vill ha det, kan du ta bort attributet border och låta taggen <table> vara kvar. I tabell 7.2 visas de HTML-taggar som vi beskrivit under denna lektion. TABELL 7.2 HTML-taggar som har beskrivits under denna lektion HTML-tagg Avslut Beskrivning <table> </table> Identifierar början och slutet av en tabell. Allt tabellinnehåll måste ligga mellan dessa taggar. <td> </td> Tabelldatacell. Liknar en kolumn. <th> </th> Tabellrubrik. <tr> </tr> Tabellrad. Omger tabellceller (<td>) och rubriker (<th>).

7 74 Lektion 7 Under denna lektion har du lärt dig att: Med tabeller kan man styra layouten för element i ett HTML-dokument (som text, navigering och bilder). Med extra mellanslag i ett HTML-dokument blir det lättare att hålla reda på tabelltaggarna. Webbläsare ignorerar alla extra mellanslag. Attributen colspan och rowspan slår ihop celler så att man kan skapa komplexa tabeller.