The Web Developer Bootcamp table excise

重新練習熟悉 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>

image

<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>