首页 > itarticle > the web developer bootcamp table excise

the web developer bootcamp table excise

admin 11月 13, 2020 0

重新練習熟悉 table 標籤，透過課程提供材料完成實作

table 標籤

table 標籤:

<table></table>: mean a table.
<tr></tr>: a row in a table.
<th></th> : a header cell in a table.
<td><td>: a standard cell in a table.

增加語意化視為群組:

只是為增加語意方便閱讀，不帶有任何效果，樣式效果之後都得在 CSS 設定

<thead></thead>: head 標題
<tbody></tbody>: body 內容
<tfoot></tfoot>: footer 頁尾

呈現方式

<table>
  
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <!-- 內容 -->
  <tbody>
    <tr>
      <td>Tom</td>
      <td>Jack</td>
    </tr>
  </tbody>
  <!-- 表底 -->
  <tfoot>
    <tr>
      <td>18</td>
      <td>20</td>
    </tr>
  </tfoot>
</table>

<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Image</th>
        <th>Type</th>
        <th>Evolve</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Bulbasaur</td>
        <td><img src="http://img4.wikia.nocookie.net/__cb20140328190757/pokemon/images/thumb/2/21/001Bulbasaur.png/200px-001Bulbasaur.png" alt=""></td>
        <td>Grass/Poison</td>
        <td><a href="http://pokemon.wikia.com/wiki/Ivysaur">Ivysaur</a></td>
      </tr>
      <tr>
        <td>Charmander</td>
        <td><img src="http://img4.wikia.nocookie.net/__cb20140724195345/pokemon/images/thumb/7/73/004Charmander.png/200px-004Charmander.png" alt=""></td>
        <td>Fire</td>
        <td><a href="http://pokemon.wikia.com/wiki/Charmeleon">Charmeleon</a></td>
      </tr>
      <tr>
        <td>Squirtle</td>
        <td><img src="http://img1.wikia.nocookie.net/__cb20140328191525/pokemon/images/thumb/3/39/007Squirtle.png/200px-007Squirtle.png" alt=""></td>
        <td>Water</td>
        <td><a href="http://pokemon.wikia.com/wiki/Wartortle">Wartortle</a></td>
      </tr>
    </tbody>
  </table>