Forelesning 4: CSS og tabeller

Neste uke

• ONSDAG 3. februar
• Biblioteket på Torshov
• Biblioteket ligger i Sandakersenteret
• Oppmøter kl. 17
• 11 trikken fra Majorstuen til Disen stopper ved Sandakersenteret
• 13 trikken fra Lilleaker til Storo-Grefsen st. stopper ved Sandakersenteret
• Etter presentasjonen reiser vil tilbake til høgskolen og jobber med arbeidskravet

Tabeller

• Introdusert i HTML 3.2
• Tabeller skulle brukes til å markere opp skjematiske data i rader og kolonner, slik som:
  • Statistikk
  • Budsjett
  • Regnskap
  • Kalender
  • Timeplan
• Ble først og fremst tatt i bruk for sideutlegg

En tabells bestanddeler

• Tabelloverskrift
• Rader
• Tabellceller
  • Overskriftceller
  • Dataceller

table-elementet

• For å markere opp en tabell brukes elementet table
  • En tabell oppfører seg som et blokkelement: Starter på ny linje og avsluttes med et linjeskift
  • I sin enkleste form kan tabellen inneholde
    • Én tabelloverskrift (valgfri)
    • Én eller flere tabellrader
  • Uten stiler vises en tabell uten ramme rundt

tr-elementet

• For å markere opp tabellrader brukes elementet tr
  • En tabellrad kan inneholde celler, som er av to typer
    1. Overskriftceller
    2. Dataceller
  • Uten stiler vises en tabellrad uten ramme rundt

Overskriftceller

• th (table header)
  • Brukes for å angi overskrift for en kolonne eller en rad
  • En overksriftcelle kan inneholde alle typer data
    • Vanlig tekst
    • XHTML blokk- og inline-elementer
  • Uten stiler vises tekst i en overskriftscelle sentrert og uthevet uten ramme

Dataceller

• td (table data)
  • Brukes for å legge inn data i en tabellcelle
  • En datacelle kan inneholde alle typer data
    • Vanlig tekst
    • XHTML blokk- og inline-elementer
  • Uten stiler vises tekst i en datacelle venstrejustert med vanlig skrift uten ramme

Eksempel på en enkel tabell

<table>
<tr>
   <th>Sektor</th>
   <th>Sum</th>
</tr>
<tr>
   <td>Næringslivet</td>
   <td>12613,7</td>
</tr>
<tr>
   <td>Instituttsektoren</td>
   <td>5581,5</td>
</tr>
</table>

Tabelleksempel i nettleseren

• Tabell: Fullstendig XHTML-eksempel

Presentasjon av tabell

• Utseendet på tabellen gjør vi i CSS
  • CSS-regel for streker rundt alle celler
    • th, td { border: black solid 1px; }
  • For å fjerne luft mellom celler og unngå «dobbeltstreker»
    • table { border-collapse: collapse; }

Tabell med stiler i nettleseren

Litt mer CSS-«pynting»

• Luft inni tabellcellene
  • th, td { padding: 0.2em; }
• Venstrejustere tabelloverskrifter
  • th { text-align: left; }
• Endre farge på tabelloverskrifter
  • th { color: white; background-color: green; }
• Hvordan kan vi høyrejustere tallene?

Endelig versjon av tabell

• Tabelleksempel: XHTML
• Tabelleksempel: CSS

En litt mer komplisert tabell

• Denne tabellen består av 5 kolonner og fire rader
  • To rader inneholder overskriftceller (th)
  • To rader inneholder tabelldata (td)

Slå sammen celler

• Attributtet colspan
  • Kan brukes på både th- og td-elementet
  • Verdien angir hvor mange kolonner som tabellcellen skal strekke seg over
  • Eksempel
    • <th colspan="3">Sektor for utførelse</th>

Slå sammen rader

• Attributtet rowspan
  • Kan brukes på både th- og td-elementet
  • Verdien angir hvor mange rader som tabellcellen skal strekke seg over
  • Eksempel
    • <th rowspan="2">Region</th>

XHTML for tabellen

<table>
<tr>
   <th rowspan="2">Region</th>
   <th rowspan="2">Totalt</th>
   <th colspan="3">Sektor for utførelse</th>
</tr>
<tr>
   <th>Næringslivet</th>
   <th>Instituttsektoren</th>
   <th>UoH-sektoren</th>
</tr>
   ...
</table>

Tabelloverskrift

• Det er mulig å legge inn en overskrift for tabellen
• Her brukes elementet caption
  • Må komme først – før alle tabellrader – inne i table-elementet
  • Uten stiler vises tabelloverskriften sentrert over tabellen og med samme bredde som tabellen

Tabelloverskrift: Eksempel

<table>
<caption>Totale FoU-utgifter etter sektor for
utførelse i 2001. Mill. kr.</caption>
<tr>
   <th>Sektor</th>
   <th>Sum</th>
</tr>
<tr>
   <td>Næringslivet</td>
   <td class="desimaltall">12613,7</td>
</tr>
<tr>
   <td>Instituttsektoren</td>
   <td class="desimaltall">5581,5</td>
</tr>
<tr>
   <td>UoH-sektoren</td>
   <td class="desimaltall">6274,2</td>
</tr>
</table>

Tabelloverskrift i nettleseren

• Tabelloverskrift: Fullstendig XHTML-eksempel

Pause

Repetisjon: CSS

• Ulike selektører
  • Element: h1 { color: red; }
  • Liste av elementer: h1, h2, h3 { color: red; }
  • Bokmerker: #deflister { color: green; }
  • Klasser: .ingress { margin-top: 0; font-weight: bold; }
  • Psevdoklasser for lenker: a:link { text-decoration: none; }
  • Elementer i kontekst: #meny ul { list-style-type: none; }

Inndelinger: div-elementet

• For å legge ut sider kan XHTML-elementet div (division) brukes
  • Et generelt blokkelement for å dele inn sider i områder
  • Hver inndeling vil identifiseres ved hjelp av et id-attributt
  • Inndelingene skal deretter plasseres i skjermbildet

Velge elementer i div-seksjoner

• XHTML-elementet div brukes for å legge ut sider
• Hver seksjon får sitt eget bokmerke
  • Det vil si at div-elementet får et id-attributt
  • Eksempel: <div id="meny"><p>Her er et avsnitt inne i seksjonen som heter meny.</p></div>
• Vi kan lage CSS-regler for elementer inne i seksjoner
  • #meny p { color: green; }
  • Regelen betyr at alle avsnitt i seksjonen med bokmerke meny får skriftfarge grønt

Eksempel: Nettsted med meny

Skisse av nettsiden

Sideutlegg trinnvis

Hver inndeling skal markeres med et div-element og bokmerkes med et id-attributt

1. Lag XHTML-siden med innholdet i følgende rekkefølge:
   1. Innholdet på toppen
   2. Menyen
      • Lag menyen som en punktliste med hypertekstlenker til de øvrige sidene på nettstedet
   3. Hovedinnholdet på siden

Sideutlegg trinnvis

2. Del opp siden i seksjoner ved hjelp av div-elementer med unike bokmerker
   • Sidetoppen kan hete sidetopp
   • Menyen kan hete meny
   • Hovedinnholdet kan hete innhold
3. Koble til stilark
   • Sett inn følgende i head-elementet:
     <link rel="stylesheet" href="stilarknavn.css" type="text/css" />
4. Sett inn CSS-regler for hovedutseendet på nettsiden
   • Skrift, farger, overskrifter etc.

Sideutlegg trinnvis

5. Lag en CSS-regel for midlertidige hjelpelinjer:
   • div { border: black dotted thin; }
6. Lag CSS-regler for å gjøre om punktlisten med lenker til en meny
   • #meny ul { list-style-type: none; margin-left: 0; margin-top: 0; padding-left: 0; }
   • #meny li { background-color: silver; border: black solid thin; padding: 0.2em; margin-bottom: 0.2em; width: 6em; }
   • #meny a:link, #meny a:visited { color: black; text-decoration: none; }
   • #meny a:hover { color: red; }

Sideutlegg trinnvis

7. Endre bakgrunnsfarge på seksjonen innhold
   • #innhold { background-color: white; }
8. Lag CSS-regler for å få menyen til å flyte til venstre for innholdet
   • #meny { float: left; width: 7em; }
   • #innhold { margin-left: 7em; }
   • NB! Venstremarg for #innhold må være større enn eller lik bredden på #meny
9. Fjern hjelpelinjene
10. Sett inn ramme rundt elementer som skal ha det
    • #innhold {border: black solid thin;}

Sideutlegg trinnvis

11. Sett inn luft der det trengs
    • #innhold {padding: 0.5em; }
    • #innhold p { margin-top: 0; }

• XHTML-dokumentet for nettsiden
• Tilhørende komplett stilark

Validering av CSS

• Bruk W3Cs valideringstjeneste for å sjekke at CSS er korrekt
• URL: http://jigsaw.w3.org/css-validator/
• Oppgi adressen til XHTML-siden som bruker CSS-filen

Pause

Øvelser

• Begynn å arbeide med arbeidskrav 1