tableタグのマークアップ課題でよく見られた回答

256timesのサービス開発は徐々に進んでいますが、今週報告できそうなことはまだちょっとない感じですかね...。

ただせっかくなので256timesで課題レビューをしていたときによく見られた回答について紹介してみます。

たとえば次のような課題を出したとします。

次のような会社年表があったとして、適切なタグでマークアップしてください。

2014年 会社設立
2015年 サイトリニューアル
2017年 新規事業リリース

よく見られた回答は次のようなものでした。

<table border="1">
<tr><td>2014年</td><td>会社設立</td></tr>
<tr><td>2015年</td><td>サイトリニューアル</td></tr>
<tr><td>2017年</td><td>新規事業リリース</td></tr>
</table>

この回答で気になるのは「border="1"」という箇所ですね。HTMLはあくまで文書の内容や構造をマークアップしていきます。一方、表の枠線といった見た目に関するものはCSSにてスタイリングすべきです。

MDNのtableの項でもborder属性について以下のような注釈がありますね。

非推奨になったため、この属性を使用しないでください。<table> 要素は CSS を使ってスタイルされるべきです。 border 属性と同様の効果を与えるためには、 border や border-color、 border-width、 border-style CSS プロパティを使用するしてください。

昔HTML/CSSを少し勉強していた人によく見られた傾向ですが、HTML＝文書構造、CSS＝見た目を強く意識してHTML/CSSを組み上げていくのがいいかと思います。

なお、ドットインストールでは「はじめてのHTML」「はじめてのCSS」をリニューアルしたので是非こちらもあわせてご覧いただければと思います。

・『はじめてのHTML』と『はじめてのCSS』をリニューアルしました
https://note.mu/dotinstall/n/n526413756304