HTML・CSS講座

写真ブロガーのためのHTML入門 Vol.3

記事内に商品プロモーションを含む場合があります

写真ブロガーのためのHTML入門の第3弾です。
今日はテーブルタグについて説明します。

tableタグ(テーブルタグ)

このタグは少し使い方がややこしいです。
ちゃんと伝わるかどうかわかりませんが、がんばります!

まずこのtableタグで作ることができるのは、Excelの表のようなものだとお考え下さい。
横に行があって、縦に列があるような感じですね。行と列が交わるところが、1つのセルです。これをテーブルタグで表現するとこうなります。

<table>
     <tr>
          <td>ここにセル</td>
     </tr>
</table>
ここにセル

このように書くと、1行1列の1つのセルが表示されます。
あれれ、tableの他にも、「tr」とか「td」というタグが出てきたぞ、と思いますよね。これらはそれぞれ、
「table row」
「table data cell」
の略です。rowというのは行のことですよね。1つのrowの中に、data cellが1つ入っていますよ、というのが上で取り上げたサンプルです。さて、それではセルの数を増やしてみましょう。セルを表現するのはtdタグでした、ですので、

<table>
     <tr>
          <td>1つ目のセル</td>
          <td>2つ目のセル</td>
          <td>3つ目のセル</td>
     </tr>
</table>
1つ目のセル2つ目のセル3つ目のセル

このように書くことで、1つの行に、横方向に3つのセルが追加されます。
それじゃあ行を増やすのは、どうしたらよいでしょうか。勘のいい方はわかると思いますが、trタグを増やします。

<table>
     <tr>
          <td>1つ目のセル</td>
          <td>2つ目のセル</td>
          <td>3つ目のセル</td>
     </tr>
     <tr>
          <td>4つ目のセル</td>
          <td>5つ目のセル</td>
          <td>6つ目のセル</td>
     </tr>
</table>
1つ目のセル2つ目のセル3つ目のセル
4つ目のセル5つ目のセル6つ目のセル

このように2つめのtrタグのセットを追加しました。これで2行3列の表を表現することができました。

今日はこの辺にしておきましょう。tableタグにはExcelと同じように隣り合うセルを結合する、ということができます。これはかなり複雑な書き方になっていまして、Webデザイナーの私でも駆け出しのころはいまいちわかりにくかったくらいです。興味がありましたら、自分で調べてみてくださいね。それでは、また次回のHTML入門をお楽しみに!

===

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします!

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
らぐち
コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA