簡単な表を作ってみた HTML,CSS復習⑯

この記事でわかること

 

簡単な表の作り方がわかる

今日は早くもHMTL,CSS復習の16回目となりました。塵も積もれば山となるですね。

簡単な表を作っていきたいと思います。

簡単な表の作り方

まずtableタグで全体を囲います

次のように表の最初と最後に使います

<table>
</table>

次に一行目を作っていきます。

表の一行目は項目ですよね。

表の項目はthタグを使います。また一行一行はtrタグで区切ります。

thタグの背景は薄い青色で文字は太くしてみます。

スタイルシートには次のように記述します。

th.koumoku{
background-color:lightcyan;     /*背景は薄い青色*/
font-weight:bold;                      /*文字は太く*/
}

記事中

<tr>
<th class="koumoku">好きな食べ物</th>
<th class="koumoku">好きなジュース</th>
</tr>

次に二行目～を書いていきます。

二行目以降はtdタグを使います。

一行目は薄い青色にしたので

偶数行の背景は白色、奇数行の背景は薄い青色にしてみます。

偶数行は何もしないので奇数行のスタイルシートだけ用意します。

奇数行のスタイルシート

td.kisuu{
background-color:lightcyan; /*背景は薄い青色*/
} 

二行目の記事中

<tr>
<td>お寿司</td>
<td>オレンジ</td>
</tr>

三行目の記事中

<tr>
<td class="kisuu">焼肉</td>
<td class="kisuu">お茶</td>
</tr>

まとめるとスタイルシート、記事中の記述は次のようになります。

スタイルシート

th.koumoku{
background-color:lightcyan;    /*背景は薄い青色*/
font-weight:bold;                      /*文字は太く*/
}

td.kisuu{
background-color:lightcyan; /*背景は薄い青色*/
}   

記事中

<table>
  <tbody>
      <tr>
         <th class="koumoku">好きな食べ物</th>
         <th class="koumoku">好きなジュース</th>
     </tr>
     <tr>
        <td>お寿司</td>
        <td>オレンジ</td>
     </tr> 
    <tr>
        <td class="kisuu">焼肉</td>
        <td class="kisuu">お茶</td>
    </tr>
  </tbody>
</table>

すると次のようになります。

好きな食べ物	好きなジュース
お寿司	オレンジ
焼肉	お茶