Summary  
This chapter explains how to structure HTML tables by using the `<table>`, `<caption>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, and `<td>` elements to organize rows, headers, and data cells.

General domain of usage  
Presenting structured data in web pages

Taulukot auttavat esittämään jäsenneltyä dataa, kuten aikatauluja, kalentereita, taloustietoja, ruokalistoja ja hinnastoja. HTML tarjoaa useita elementtejä taulukoiden rakentamiseen.

Tärkeimmät taulukkokomponentit:
- `<table>`: taulukon säiliö;
- `<tr>`: rivi;
- `<th>`: otsikkosolu (lihavoitu, keskitetty);
- `<td>`: tavallinen tietosolu.

Alla rakennetaan yksinkertainen ruokalistataulukko vaihe vaiheelta.

## Vaihe 1: HTML-rakenteen luominen
Aloita luomalla sivullesi perus-HTML-rakenne:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    
  </head>
  <body>
    
  </body>
</html>
```

## Vaihe 2: Taulukon määrittely
Lisää `<body>`-elementin sisälle `<table>`-elementti taulukon määrittämistä varten:
```html
<table>
  
</table>
```

## Vaihe 3: Taulukon otsikko (valinnainen)
Jos haluat antaa taulukolle otsikon, voit käyttää `<caption>`-elementtiä:
```html
<table>
  <caption>New menu</caption>
  
</table>
```

## Vaihe 4: Luo taulukon otsikot
Lisää seuraavaksi taulukon otsikot `<thead>`-elementin sisään. Jokainen otsikko määritellään `<th>`-tagilla:
```html
<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  
</table>
```

## Vaihe 5: Täytä taulukko tiedoilla
Käytä `<tbody>`-elementtiä taulukkorivien rajaamiseen ja `<td>`-tageja tietosolujen määrittämiseen:
```html
<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>
```

## Koko koodi
Käy kaikki elementit huolellisesti läpi varmistaaksesi, että niiden yhteys on selkeä.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gTGluayB0byBleHRlcm5hbCBzdHlsZXNoZWV0IC0tPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHRhYmxlPgogICAgICA8IS0tIFRhYmxlIHRpdGxlOiBEZXNjcmliZXMgdGhlIGNvbnRlbnQgb2YgdGhlIHRhYmxlIC0tPgogICAgICA8Y2FwdGlvbj4KICAgICAgICBOZXcgTWVudQogICAgICA8L2NhcHRpb24+CgogICAgICA8IS0tIFRhYmxlIGhlYWRlcjogRGVmaW5lcyBjb2x1bW4gaGVhZGluZ3MgLS0+CiAgICAgIDx0aGVhZD4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGg+Q2F0ZWdvcnk8L3RoPgogICAgICAgICAgPHRoPk1lYWw8L3RoPgogICAgICAgICAgPHRoPlByaWNlPC90aD4KICAgICAgICA8L3RyPgogICAgICA8L3RoZWFkPgoKICAgICAgPCEtLSBUYWJsZSBib2R5OiBDb250YWlucyB0aGUgbWFpbiBjb250ZW50IG9mIHRoZSB0YWJsZSAtLT4KICAgICAgPHRib2R5PgogICAgICAgIDwhLS0gUm93IDE6IERldGFpbHMgZm9yIGFuIGFwcGV0aXplciAtLT4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGQ+QXBwZXRpemVyPC90ZD4KICAgICAgICAgIDx0ZD5HYXJsaWMgU2hyaW1wczwvdGQ+CiAgICAgICAgICA8dGQ+JDg8L3RkPgogICAgICAgIDwvdHI+CiAgICAgICAgPCEtLSBSb3cgMjogRGV0YWlscyBmb3IgYSBwYXN0YSBkaXNoIC0tPgogICAgICAgIDx0cj4KICAgICAgICAgIDx0ZD5QYXN0YTwvdGQ+CiAgICAgICAgICA8dGQ+TG9ic3RlciBMaW5ndWluZSBOb29kbGVzPC90ZD4KICAgICAgICAgIDx0ZD4kMTY8L3RkPgogICAgICAgIDwvdHI+CiAgICAgICAgPCEtLSBSb3cgMzogRGV0YWlscyBmb3IgYSBzYW5kd2ljaCAtLT4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGQ+U2FuZHdpY2g8L3RkPgogICAgICAgICAgPHRkPkxvYnN0ZXIgVGFpbCBTYW5kd2ljaDwvdGQ+CiAgICAgICAgICA8dGQ+JDExPC90ZD4KICAgICAgICA8L3RyPgogICAgICA8L3Rib2R5PgogICAgPC90YWJsZT4KICA8L2JvZHk+CjwvaHRtbD4=

LyogCiAgV2UgY29sbGFwc2UgdGhlIGJvcmRlcnMgb2YgZWFjaCBjZWxsLiAKICBCeSBkZWZhdWx0IGVhY2ggY2VsbCBoYXMgaXRzIG93biBib3JkZXJzIAogIHdoaWNoIGFyZSBub3QgY29ubmVjdGVkLgoqLwp0YWJsZSB7CiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTsKfQoKLyogCiAgQWRkIGEgYm9yZGVyIGFuZCBwYWRkaW5nIHRvIHRoZSBjZWxscywgCiAgdGhlIGRpc3RhbmNlIGZyb20gdGhlIGNvbnRlbnQgdG8gdGhlIGJvcmRlci4KKi8KdGFibGUgdGgsCnRhYmxlIHRkIHsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwp9

Oletuksena HTML-taulukoilla ei ole erityistä visuaalista tyyliä. Taulukon ulkoasun muokkaamiseksi lisää CSS-tyylejä erilliseen CSS-tiedostoon tai HTML-tiedoston `<style>`-osioon `<head>`-tunnisteen sisään.


Tässä vaiheessa ei kuitenkaan tarvitse perehtyä CSS:ään, sillä keskitymme vain HTML:ään.
Jos haluat nähdä, miltä taulukko näyttää ilman CSS-tyylejä, voit poistaa rivin 4: `<link rel="stylesheet" href="index.css" />`, joka tuo CSS-tyylit käyttöön.

 

Huomio

Mikä HTML-elementtiä käytetään taulukon määrittämiseen verkkosivulla?

Mitä HTML-elementtiä käytetään määrittämään rivin taulukossa?

Mikä on `<th>`-elementin tarkoitus HTML-taulukossa?

Opi HTML:n (HyperText Markup Language) perusteet, joka on verkkokehityksen perusta. Tämä aloittelijaystävällinen kurssi kattaa tunnisteet, attribuutit, elementit ja verkkosivujen rakenteen. Hanki käytännön taitoja otsikoiden, kappaleiden, listojen, kuvien, linkkien, lomakkeiden ja taulukoiden luomisessa. Tutustu parhaisiin käytäntöihin, optimointiin ja verkkosivustojen saavutettavuuteen. Aloita verkkokehityksen matkasi HTML:n avulla.

Tutki verkon sisäistä toimintaa. Opi, miten data kulkee verkkojen läpi, tutustu protokollien rooliin ja selvitä IP-osoitteiden ja verkkotunnusten mysteerit. Saa korkeatasoinen ymmärrys siitä, miten verkkoselaimet ja palvelimet kommunikoivat toimittaakseen verkkosisältöä.

Tutustu tunnisteiden voimaan sisällön jäsentämisessä, otsikoista ja kappaleista listoihin ja taulukoihin. Opi, kuinka voit parantaa elementtejä attribuuteilla.

HTML-dokumentin rakenteen ydin. Opi HTML-dokumentin osat, mukaan lukien doctype-ilmoitus, head ja body. Ymmärrä kunkin elementin tarkoitus ja miten ne vaikuttavat verkkosivun kokonaisrakenteeseen.

Tee verkkosivusta houkuttelevampi median, kuten kuvien, äänen ja videon avulla. Työskentele jäsennellyn taulukkomuotoisen datan kanssa taulukoiden muodossa.

Tutustu HTML-lomakkeiden monipuolisuuteen. Opi suunnittelemaan intuitiivisia ja käyttäjäystävällisiä lomakkeita hyödyntämällä keskeisiä käsitteitä ja tekniikoita. Selvitä, kuinka lomakkeet mahdollistavat käyttäjän vuorovaikutuksen ja tietojen lähettämisen verkkosivustoilla.

Taulukoiden luominen ja jäsentäminen HTML:ssä

Vaihe 1: HTML-rakenteen luominen

Vaihe 2: Taulukon määrittely

Vaihe 3: Taulukon otsikko (valinnainen)

Vaihe 4: Luo taulukon otsikot

Vaihe 5: Täytä taulukko tiedoilla

Koko koodi

1. Mikä HTML-elementtiä käytetään taulukon määrittämiseen verkkosivulla?

2. Mitä HTML-elementtiä käytetään määrittämään rivin taulukossa?

3. Mikä on `<th>`-elementin tarkoitus HTML-taulukossa?