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
Can you explain what each table element does in more detail?
How can I style this table to make it look better?
Can you show me how to add more rows or columns to the table?
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!
