Taulukoiden Luominen ja Jäsentäminen HTML:ssä
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:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Vaihe 2: Määritä taulukko
Lisää <body>-elementin sisälle <table>-tagi taulukon määrittämiseksi:
<table>
<!-- Table content will go here -->
</table>
Vaihe 3: Lisää taulukon otsikko (valinnainen)
Jos haluat antaa taulukolle otsikon, voit käyttää <caption>-tagia:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Vaihe 4: Luo taulukon otsikot
Seuraavaksi lisää taulukon otsikot <thead>-elementin sisälle. Jokainen otsikko määritellään <th>-tagilla:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
Vaihe 5: Täytä taulukko tiedoilla
Käytä <tbody>-elementtiä taulukkorivien ympäröimiseen ja <td>-tageja määrittämään solut, jotka sisältävät tiedot:
<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
Tarkastele kaikkia elementtejä huolellisesti varmistaaksesi, että niiden välinen suhde on selkeä.
index.html
index.css
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älle.
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.
Jos haluat oppia lisää CSS:stä, harkitse CSS Fundamentals -kurssia.
1. Mikä HTML-elementti määrittää taulukon verkkosivulla?
2. Mikä HTML-elementti määrittää rivin taulukossa?
3. Mikä on <th>-elementin tarkoitus HTML-taulukossa?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Mahtavaa!
Completion arvosana parantunut arvoon 2.38Taulukoiden Luominen ja Jäsentäminen HTML:ssä
Pyyhkäise näyttääksesi valikon
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:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Vaihe 2: Määritä taulukko
Lisää <body>-elementin sisälle <table>-tagi taulukon määrittämiseksi:
<table>
<!-- Table content will go here -->
</table>
Vaihe 3: Lisää taulukon otsikko (valinnainen)
Jos haluat antaa taulukolle otsikon, voit käyttää <caption>-tagia:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Vaihe 4: Luo taulukon otsikot
Seuraavaksi lisää taulukon otsikot <thead>-elementin sisälle. Jokainen otsikko määritellään <th>-tagilla:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
Vaihe 5: Täytä taulukko tiedoilla
Käytä <tbody>-elementtiä taulukkorivien ympäröimiseen ja <td>-tageja määrittämään solut, jotka sisältävät tiedot:
<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
Tarkastele kaikkia elementtejä huolellisesti varmistaaksesi, että niiden välinen suhde on selkeä.
index.html
index.css
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älle.
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.
Jos haluat oppia lisää CSS:stä, harkitse CSS Fundamentals -kurssia.
1. Mikä HTML-elementti määrittää taulukon verkkosivulla?
2. Mikä HTML-elementti määrittää rivin taulukossa?
3. Mikä on <th>-elementin tarkoitus HTML-taulukossa?
Kiitos palautteestasi!
