その他ばいりんがるWEBデザイナーのblogWebデザインやIT,海外についての情報をお届けします。まとめあらすじExcel(エクセル)やWord(ワード)といったソフトウェアで、表やテーブルを見たことはありませんか?実はHTMLにもそのような表やテーブルを表現するタグがあるんです。今回はそんなHTMLで使われる、「テーブルタグ」についてや、テーブル内はどのような構成なのかも合わせてご紹介していきたいと思います。具体的には<tr><th><td><thead><tbody><tfoot><caption><col><colgroup>といったタグを中心にご紹介していきます。スポンサーリンクテーブルタグとはテーブルタグとは、HTMLで表やテーブルを表現したい時に使用するタグのことです。</tfoot></table>といった文法で構成されています。memoなお、テーブルの大きさによっては、<thead>や<tbody>、<tfoot>といった要素は省略するのが一般的です。<caption>や<colgroup>、<col>タグも好みによってなので、こちらも省略可能です。スポンサーリンクテーブルタグ内に記載する基本タグとは<table>タグ内に記載する基本的なタグには<tr><th><td>の3つがあります。細かくテーブルをグループ分けする際に記載する<thead><tbody><tfoot>といったタグもありますが、詳しくは次項で解説します。東京といったように表示されます。rowの略で、テーブルの行内に記載する値を囲うタグです。<td></td></tr>といった具合に表示したい行数に応じて<tr>タグ内に<th>か<td>を行数分記載します。<th><tr>タグ内に記載することのできるタグの一つ、<th>タグ。headerの略でテーブル内の見出しの役割をするタグです。<td><tr>タグ内に記載することのできるもう一つのタグ、<td>タグ。<th>タグが見出しの役割を担うのに対し、<td>タグはテーブル内のデータを記載することのできるタグです。テーブルをグループごとに分けるタグテーブルを細かくグループ分けしたい際には<thead><tbody><tfoot>といったタグを使用することができます。<thead>theadタグはテーブルのヘッダ部分をグループ化する際に記載するタグです。<tbody>tbodyはthead以降の本体部分をグループ化する際に記載するタグです。<tfoot>tfootはテーブルのフッタ部分をグループ化する際に記載するタグです。memoこれらのタグを記載する理由として、印刷する際にヘッダやフッタ部分を全ページに表示することができたり、ブラウザ上でヘッダとフッタ部分を固定してボディ部分をスクロール表示させることが可能になります。テーブルが長くなったり、大きくなった際により各テーブル行をわかりやすくしてくれる効果もあったりします。テーブルのタイトルを定義するcaption(キャプション)タグ<caption>タグはテーブルのタイトルを記載する際に使用するタグです。<caption>タグの記載位置は<table>タグの下です。1歳テーブルの縦列のスタイルを変更する際に使うタグテーブルの縦列のスタイルをまとめて変更したい際に使用するタグが<col><colgroup>の2つです。memoどちらのタグも終了タグを省略することが可能です。<col><col>タグは1つの縦列に対してスタイルを反映する際に有効なタグです。<col>タグは<colgroup>タグ内に記載する必要があります。width=”100”><colgroup><colgroup>タグは縦列をグループ化して、スタイルを反映することができます。反映させたい縦列の数はspan属性で記載します。width=”100”>まとめいかがだったでしょうか。テーブルタグはよく使うタグですので、覚えておいて損はないはずです。これらのタグを使いこなすことで、テーブル(表)を作成することができるようになるでしょう。ご自身のウェブサイトにテーブルを表現してみてはいかがでしょうか。Designer目指し日々奮闘中。海外や英語、Webデザインに関する情報を提供してきます。最近書いた記事Webデザイン初心者でも簡単にwebサイトが作れちゃうCMSって何!?例:WordPressCSSCSSプロパティのoverflowとは?hiddenやscrollの意味についても!HTMLブロック要素とインライン要素の違いとは?インラインブロックで解決!CSSCSSで変更できるfont(フォント)のあれこれ。HTMLの関連記事CSSプロパティのoverflowとは?hiddenやscrollの意味についても!2019年9月22日ブロック要素とインライン要素の違いとは?インラインブロックで解決!2019年9月21日CSSで変更できるfont(フォント)のあれこれ。海外の観光客のみならず、日本国内でも人気の高い観光地、京都。<head>タグとは、実際のウェブ(web)ページには表示されませんが、ページの重要なデータを記載する場所です。今回の記事は、アメリカ出身の女性アーティストに焦点を当ててみたいと思います。英語の資格がそれぞれどの程度のレベルなのか知りたいと考えたことはないでしょうか。大ヒット映画「トランスフォーマー」のスピンオフ作品です。(ウォルト...xxsuguruxxオーストラリア在住。Designer目指し日々奮闘中。海外や英語、Webデザインなどに関する情報を提供してきます。6お問い合わせお問い合わせプロフィール。