Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Suunnittele Toiminnallinen HTML-Taulukko | Työskentely Median ja Taulukoiden Kanssa
HTML:n Perusteet

bookHaaste: Suunnittele Toiminnallinen HTML-Taulukko

Tavoite

Esitä työntekijöiden tiedot jäsennellyssä taulukkomuodossa käyttämällä sopivia HTML-tageja rivien ja sarakkeiden luomiseen.

Tehtävä

Luo taulukko, jossa on kolme saraketta: Name, Position ja Wage. Keskity käyttämään oikeita HTML-tageja taulukon rivien ja sarakkeiden täyttämiseen. Tässä ovat tiedot, jotka tulee sisällyttää:

  1. Name: Emma Johnson | Position: Sales Associate | Wage: $15.50 per hour.
  2. Name: Liam Thompson | Position: Customer Service Representative | Wage: $14.75 per hour.
  3. Name: Olivia Rodriguez | Position: Marketing Coordinator | Wage: $18.25 per hour.
  4. Name: Noah Smith | Position: IT Support Specialist | Wage: $20.00 per hour.
  5. Name: Ava Davis | Position: Administrative Assistant | Wage: $16.80 per hour.
index.html

index.html

index.css

index.css

copy
  1. Käytä table-tägiä määrittämään taulukon pääsäiliöelementti.
  2. Käytä thead-tägiä ryhmittelemään taulukon otsikkosisältö, kuten sarakeotsikot.
  3. Käytä tr-tägiä määrittämään uusi rivi taulukossa.
  4. Käytä th-tägiä määrittämään kunkin sarakkeen otsikkoteksti.
  5. Käytä tbody-tägiä ryhmittelemään taulukon pääsisältö, joka sisältää rivit ja tietosolut.
  6. Käytä td-tägiä määrittämään kunkin taulukon solun varsinainen data tai sisältö.
index.html

index.html

index.css

index.css

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 9

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you show me an example of how the table should look in HTML?

What are the correct HTML tags to use for creating the table structure?

Can you explain the difference between thead and tbody in a table?

bookHaaste: Suunnittele Toiminnallinen HTML-Taulukko

Pyyhkäise näyttääksesi valikon

Tavoite

Esitä työntekijöiden tiedot jäsennellyssä taulukkomuodossa käyttämällä sopivia HTML-tageja rivien ja sarakkeiden luomiseen.

Tehtävä

Luo taulukko, jossa on kolme saraketta: Name, Position ja Wage. Keskity käyttämään oikeita HTML-tageja taulukon rivien ja sarakkeiden täyttämiseen. Tässä ovat tiedot, jotka tulee sisällyttää:

  1. Name: Emma Johnson | Position: Sales Associate | Wage: $15.50 per hour.
  2. Name: Liam Thompson | Position: Customer Service Representative | Wage: $14.75 per hour.
  3. Name: Olivia Rodriguez | Position: Marketing Coordinator | Wage: $18.25 per hour.
  4. Name: Noah Smith | Position: IT Support Specialist | Wage: $20.00 per hour.
  5. Name: Ava Davis | Position: Administrative Assistant | Wage: $16.80 per hour.
index.html

index.html

index.css

index.css

copy
  1. Käytä table-tägiä määrittämään taulukon pääsäiliöelementti.
  2. Käytä thead-tägiä ryhmittelemään taulukon otsikkosisältö, kuten sarakeotsikot.
  3. Käytä tr-tägiä määrittämään uusi rivi taulukossa.
  4. Käytä th-tägiä määrittämään kunkin sarakkeen otsikkoteksti.
  5. Käytä tbody-tägiä ryhmittelemään taulukon pääsisältö, joka sisältää rivit ja tietosolut.
  6. Käytä td-tägiä määrittämään kunkin taulukon solun varsinainen data tai sisältö.
index.html

index.html

index.css

index.css

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 9
some-alt