ウェブDeBLOG|トライデントコンピュータ専門学校 Webデザイン学科

トライデントコンピュータ専門学校 Webデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。 

2014.08.09 [土] table要素のおさらい

最終更新:2017.10.11Webサイト制作Tips
※thead要素、tbody要素、tfoot要素の部分を追記、修正しました。(2014年8月10日)

そういえば、2007年ごろまでは、トライデントコンピュータ専門学校でもテーブルレイアウトでWebデザインを教えていましたが、最近はCSSレイアウトになり表制作以外ではtable要素も使う機会がなくなりました。
いまでは表制作は、もっぱらCMS備え付けのビジュアルエディタやオーサリングツールを使ってしまって、逆に苦手意識すらあります。さらにHTML5では廃止される予定の属性もあるということで、サクッと調べてみました。
ちなみに今日は台風11号が来ています。

W3Cの仕様書には、

table要素はテーブル形式で、複数の寸法を持つデータを表す。
テーブルは、行、列、およびその子孫によって与えられるセルを持つ。
行と列はグリッドを形成する。テーブルのセルは完全に重複することなく、グリッドをカバーしなければならない。

The table element takes part in the table model. Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap.
と書いてあります。セルの集合体ということでしょうか。

早速、マークアップしていきましょう。 table要素の中に、テーブルの見出しとなる行を表す部分にtheadを入れます。さらにthead要素の中には行を表すためtr要素(Table Row)を入れ、その中にth要素(table herder cell)でヘッダー・セル(※は表の中でデータセルの見出しとなるセル)を入れます。 thead要素の次にテーブルのデータを表す部分にtbody要素を入れます。tbodyの中では、行にtr要素(Table Row)さらにその中のデータ・セルにtd要素(Table Data)を入れます。tr要素をtable要素の直下に入れることはHTML5ではいけないとされていますが、tr要素を直下にいれたとしてもtbody要素があるものとしてDOMが構成されます。また、表計算の合計などを入れたりする場合など、tfoot要素を追加することもできます。 tbody要素、thead要素、tfoot要素ともに必須ではありません。ただし気をつけるのは、tbody要素は、table要素の子要素として複数配置することができますが、thead要素とtfoot要素はそれぞれ1つだけ配置することしかできません。 さらに、HTML5では、tbody要素とtfoot要素の配置位置はどちらでも良いことになっています。 つまりtfoot要素をtbody要素の前に配置しても、ブラウザ上ではフッタ部分はテーブルの最後に表示されます。 table要素の中にcaption要素を入れ、そこにテーブルのタイトルや説明をいれることもできます。では、8/8現在のプロ野球セリーグの順位を入れてみましょう。
8/8現在のプロ野球セリーグ順位
順位チーム名
1位巨人
2位阪神
3位広島
4位中日
5位DeNA
6位ヤクルト
わかやすく図で説明するとこんな感じです。 table_etc.jpg また、テーブルの構造や意味を説明するために、summary属性がいままで使われてきたのですが、HTML5からは、廃止されました。その他廃止された(もしくは廃止予定)の属性は以下の通りです。 summaryの代替案も複数ありますが、p要素もしくはcaption要素にclass属性でsummaryを設定する方法のようです。
tablealign bgcolor border cellpadding cellspacing frame rules width
tbodyalign char charoff valign
tfootalign char charoff valign
tdaxis abbr scope align bgcolor border cellpadding cellspacing char charoff height nowrap valign width
thaxis abbr align bgcolor border cellpadding cellspacing char charoff height nowrap valign width
theadalign char charoff valign
tralign bgcolor border cellpadding cellspacing char charoff valign
つぎに複雑な表を作成するため縦をつなげる場合は、行「row」を複数利用するということでrowspan属性に数値を入れます。横をつなげる場合は、複数の列「col」を利用するということでcolspan属性で数値を入れます。
8/8現在のプロ野球セリーグ順位
リーグ順位チーム名(colspanに2)
セリーグ(rowspanに6)1位巨人95試合
2位阪神98試合
3位広島97試合
4位中日100試合
5位DeNA93試合
6位ヤクルト97試合
さらに、テーブル内の1つ以上の列をグループにすることができるcolgroup要素ついて。colgroup要素の中にはcol要素のみ入れることが可能で、span属性でも指定することができます。CSSで設定すると
colgroup[span="1"]{
border-left: 3px solid red; //span="1"の列の左に赤い線をいれる
}
col.team{
background-color: #ccccff;  // class="team"の列の背景色を#ccccff;
}
col.gamelength{
background-color: #ffcccc; // class="team"の列の背景色を#ffcccc
}
8/8現在のプロ野球セリーグ順位
リーグ順位チーム名
セリーグ1位巨人95試合
2位阪神98試合
3位広島97試合
4位中日100試合
5位DeNA93試合
6位ヤクルト97試合
のようになります。 また、table要素のデフォルトCSSの設定(http://www.w3.org/TR/html-markup/table.html)は、
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray; 
}
のため、borderで線を設定すると各セルの間にスペースができてしまいます。reset.cssやnormalize.cssで、
table{
    border-collapse: collapse; 
    border-spacing:0;
}
のように上書きして使用します。 ということで、table要素についてサクッと調べてみました。tableをレスポンシブ対応させるなんて記事(レスポンシブウェブデザイン案件でtableの見た目を大きく変える|clear sky source)もありますので、まだまだ奥は深そうです。 今日は「名古屋マークアップ勉強会 8/9」に参加してブログを書いていました。他の参加者の方も自分たちでテーマを決めて作業をされていて、最後に成果を発表して意見交換ができて、とても勉強になりました。次回は9月の半ばに開催されるそうなので「ここのマークアップはどう書くのだろう?CSS3のアニメーションってどう?」なんて思っている人は参加してみるといいと思います。 では、台風11号はも迫ってきましたので、皆さんお気をつけください。 taifu11.jpg
検索フォーム
プロフィール

担当:Webデザイン学科

名古屋駅から歩いて6分、トライデントコンピュータ専門学校のWebデザイン学科を紹介します。

トライデントロゴ

質問などはLINEでどうぞ。

Instagram
Webデザイン学科実績
<プレゼン>
WCAN 2016 Springに参加してきました。
WCAN 2015 Winterに参加しました。
建設業入職者増加プロジェクトの発表会に参加
WCAN 2015 Summerに参加してきました。
WCAN 2013 Winterに参加
WCAN(秋)に参加しました。
無事、発表が終わりました【WordFes Nagoya 2013】
WCAN 2013 Summerに参加してきました。
WCAN 2011 Winter LT&LOGO
学生がライトニングトークで話しました。
<展示会>
1年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
信州アプリコンテスト0 [ゼロ] 2019 KDDI賞受賞!
第5回 ソレコン☆ポスコン特別賞受賞
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第56回技能五輪全国大会(ウェブデザイン職種)敢闘賞受賞!
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第14回若年者ものづくり競技大会
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種ウェブデザイン若年者ものづくり競技大会Webサイト映画2013名古屋ECCコンピュータ専門学校ポートフォリオ学生ブログWebデザイン2009WinterWebサイト制作1年生進級展JavaScriptWordPress技能五輪全国大会2011アクアリングオープンキャンパスかっぱ商店街礒田優入学式アクセス解析卒業制作展NagoyaWordpressライトニングトーク卒展2014a-blogcms矢野りんWebCSS石黒雄介Web制作会社SummerCGイラスト学科卒業制作瀬川大勝体験入学Autumn面白法人カヤック若年者ものづくり大会テンプレート作成ホームページ・ビルダー合同企業展杉本拓也大阪mini東京研修学生インタビュー2012HTML5ウェブデザイン技能競技会佐藤歩Flash名古屋駅第48回技能五輪全国大会HCDあいちカレーラーメンコンテスト閉館日2010Japanココストアhtml5GIOIIJinAdobe2015ウェブデザイン技能競技大会gifアニメWebデザインギャラリー林田実樹プレゼンテーション水野裕太UX制作合宿プロジェクトCSS399eaglejQueryCentOS田中睦翔フォトアルバムセントレアCOMMUNICATIONBananaAdWebワークショップ成田篤紀NEXTラーメン愛知県Google人間中心設計Webクリエイター能力認定試験専門学校学生情報デザインフォーラム情報デザイン夏季閉館日サイバーエージェント夏休み上村水月トライデント祭りSpringGridLayout企業訪問ブログパーツマールウェブデザイン技能検定display:gridグリッドレイアウト北濱大輔2018カメラ阿部淳也熊谷佳紀飯田淳介謹賀新年フロントエンドエンジニアYahoo!Japanコミュニケーションデザインワークショップワークショップ結果発表幕張メッセ名古屋市科学館ウェブDeBLOGモンキーワークスポートフォリオサイトWebデザイナー空気人形和みStoreエイチームCalendar5T(ファイヴティー)SEOAdventApple静岡初期設定ビジュアルエディタ写真企業課題グループ制作AWARD久保怜也サーティファイスマートフォンメ~テレ笈瀬本通りイラストマップトライデントinput要素WEBサイト制作者のためのHCDの理解in名古屋output要素option要素textarea要素愛知県選手団legend要素2008たこ焼き名商連就職活動会社訪問fieldset要素label要素form要素select要素トライデント合同企業展鷹野雅弘ForumまぼろしcanvasparticleマークアップエンジニアWebリテラシー茂森仙直うぇーぶ1年生作品展ナゴヤドーム長屋めぐみ中日ドラゴンズ知多みるく戸田芳裕卒業式スマホアプリNTTドコモ東海アップルップルiPhoneWordCamp信州アプリコンテスト[ゼロ]ディプロスアンティー・ファクトリーES6ES2015DTPWORLD情報デザイン基礎レイアウト名古屋開府400年祭PluginアプリコンテストMarkupアサココ!学習株式会社LIG水野怜美鈴木優太ウェブアクセシビリティドラマモリサワjbstyle作品集進級展真鍋大度沖縄岩手県塚本碧産学協同WordFesBoxFICC堀尾真衣出張講座豊田市美術館2017LikeCSSNiteカリキュラムCMSRunstantF-site導入授業Analytics技能五輪予選卒業制作・研究発表会2011英国王のスピーチトライデントカレッジフナ犬ablogcms求人WEBサイト制作者のためのHCDの理解大西健太DTPの勉強部屋横浜デジタルアーツ道頓堀プロトコル分析新世界ぬいぐるみのラパンKtaistyleunoplusLoad知多半島カメラワークスタジオジブリ・レイアウト展田中稚妃呂ネスカフェゴールドブレンドUntitled!!!!!!!!石井研二松坂屋美術館GoogleAnalyticsポートピア名古屋中部国際空港株式会社大沢たかおLazyプロ野球株式会社アクアリングブラザー工業株式会社増田悟GAINAXUltimateAndrioid商店サイト制作SUBARUWEBサイト制作者のためのHCD(人間中心設計)の理解放課後のプレアデス中部国際空港日本の四季柴乃櫂人名チャリITCIRCUS愛知商業高校GAキルト展チタハン10名古屋グランパス8341-3:2010TwitterFLVポスターデザイン・コンペディション名古屋市中村区グラフィクデザイン笈瀬本通商店街みの治商店キルターズフェスティバル2011プチ・フレーズ笈瀬本通名古屋クリエイターフットサル三蔵CODE名駅経済新聞中級編アクセシビリティCustomSmilies絵文字名古屋メディアボンドウェブリテラシー協会Slimbox2サーバーIA伊藤頼子小林信次forビジュアルデベロップメントFLAVER3.0YORKE.JIS名古屋サイト改善研究会シナリオペルソナiPhone4広島弁愛知県立芸術大学卒業・修了制作展1→10design細川太郎Xナゴヤ円JOY!map金シャチ商店街タロヲ商店街CODEポスターデザイン・コンペティションスーパーエレメンツUTZOOMLabuatTokyoCOMPLETEBlog「ヤノベケンジ-ウルトラ」展デコクレセキュリティGENOウィルスワークスコーポレーションCHILDRENADVENT広告批評WCAN×CSSNite西村真里子プレゼン演習TAFF'09武豊町VIIFANTASYFINALアートアニメーション山村浩二□□□switch西田幸司国家検定インターネットスキル認定普及協会ライブペイントヱヴァンゲリヲン新劇場版:破ActionScript富岡聡学科旭食品サンプル製作所食品サンプル黒い太陽ウルトラ展ファルコム音楽フリー宣言音楽ゲーム日本ファルコム荒俣宏UNIQLOヤノベケンジカスタマイズセミナーCALENDARActionScript基礎HTML+CSS基礎SagmeisterStefanW+KTokyo(+CRUZ)QubibiHelveticaデザインのへそSIGGRAPHXRAY2008WinterWebDirectionEast'08ArtlessNamTHEWEBウェブデザイン部門カンファレンスCONTEST01丹下紘希HPデザインデザインコンテストASIAVideopuppetry中村勇吾佐藤可士和SakaeNightTEXTUREサムライ造形基礎デッサンDesignCS4CollegeFLEXアンドリュー・ワイエスデザイン鳥取砂丘鳥取愛知県美術館PHPFLASHMAXデザイナーのためのプログラミング入門カナバングラフィックスウサビッチおかだよういちペルソナ/シナリオ法情報デザイン教育勉強会ヨウイチ浅野智ペルソナ&シナリオ法日本電子専門学校横浜デジタルアーツ専門学校3校合同発表会クリ博就職フェスタイラストコンテストデュエル・マスターズ教育勉強会ロゴ公募FITCCREAM#infoedu小野裕子長谷川恭久伊達千代山崎デザイン事務所コピーライティング鎌倉会社見学浜松IA2010キックオフセミナー夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナー餃子福みつ名古屋おもてなし武将隊武豊アニメーションフェスティバルTAFFWCAN46SalsaWas新横浜ラーメン博物館横浜中華街箱根合宿森川眞行慶華飯店NIKEThereThenAndごはんとFlashマークアップ演習animationescalatorアニメーションMozoramaモーション演習CG・イラストコンテストUNIQLOCKギレン総帥LPO第4回アックゼロヨン・アワード後期入賞CMS特集ソバットシアターコマ撮りアニメ電信柱エレミの恋学生参加アイディグラフィックスガンダムグラフィックデザイン今井佳子ナゴヤデザインウィーク2009是枝裕和監督KyotodotFesHCDプロセスブランディングwonderflFlash-Gamesマクロマリオネット映画のオープニング閉会式ゆるキャラAutuminカラーPHP勉強会大富豪スコアシート東京ゲームショウ2009人喰いの大鷲トリコITホワイトボックス世界のCMフェスティバルストリートビューJAPANインターネットクリエイティブアワードYahoo!武将都市ベースキャンプ名古屋美大NodeList芸大料理InstagramHTMLCollectionappendChild()ECMAScriptお母さんの二度見展マイクロソフトWebプログラミング初級講座インスタグラム醐りょう学生作品集Monacaジムナストコロン日清食品グループタカガールサイト情報系学園祭いな世驛麺通り再進学SyntaxHighlighterv4.0.1スクラップブックD3.js夏休みの課題ノートPC貸与尾鷲高校出身高校AWARDSContentsofTableTOC衣台高校梅澤朝樹ターミナル学校ProxyWCAN2017Spring佐藤洋介服部友厚株式会社エイチーム山川綾那鈴木雄太スタジオディテイルズ水曜日のカンパネラプラネタリアン専門士合同制作合宿学位出席率職業実践専門課程合同制作合宿WebプログラマーWebディレクターWeb制作のおしごと懇親会レスポンシブWebデザインウェブアートデザイナーポートフォリオアイデア帳採用担当者の心に響く高校14平野健太郎バイドゥうぇ~~~~~~~ぶワイヤーフレーム仕事UI坂本邦夫原一浩Codeplyjsdo.itPlunkerJSFiddleJSBin涼麺駅麺通りResurgenceDay:IndependenceクイズCodePenプログラムクイズ坂本貴史制作実績津田直明2016平野秀幸IA/UXプラクティスAO入試河地芳明沼田啓助カークスヴィル安藤志維堀川友章株式会社アンティー・ファクトリー松本渚PhotoshopCS6祐司株式会社スタメン髙橋コンテストソレコン☆ポスコン2019茜音髙橋茜音STUDIO日本総合ビジネス専門学校株式会社MTG2020新卒線の群生Figma企業見学新入生オリエンテーションLIGCBCTBSわたし、定時に帰ります。茂森仙直新年あけましておめでとう2019年令和2年classesHappyNewメンバーズ三瓶Year株式会社LIGHTzスポーツアナリティクス落合祐介杉浦麻紀ライフスタイル冬休み信州アプリコンテストゼロ足立丈也、平子卓哉、増田隼也エペフェンシングmarkereatツールUIデザイン脆弱性なんと読む?韓国期末テストWebデザインスペシャルデー北川パーヤンホ・ジヘHEO冨田伴成イークリエイト藤井英一JIHYEWorld)toNCF2017ミス・ユニバース・ジャパン岐阜大会フォントおじさん関口浩之Webアプリ安藤WWW(Welcome友章堀川志維新城高校青山高校前川元成コーヒー用品NextDoor斉藤洸貴cymaメーカー・ブランド平成31年牧野史門桝田草一株式会社サイバーエージェントあけおめEC事業第56回技能五輪全国大会OculusVRカルタ東京ゲームショウ2018出前授業GO第56回srcsetsourcepicture沖縄県グロースハッカーグロースハックプレゼンたにぐちまことThree.js木下健太郎就職田代豊RhizomatiksPARTYPerfumebyinspired東京佐藤ねじJQuery張山大祐第50回結果長野画像をチェックボタンにするMuseみんなのICTFacebookたこ焼きパーティWeb制作合宿そこにいない。展あいちトリエンナーレ2013displaylist-itemlist-style-typeNTTドコモ東海支社NCF2013モテ声ボーダーHTML5スマートアプリ&クリエイティブコンテスト卒業研究制作展最優秀賞ジョルテKDDI美術大学芸術大学晴れやか嵐が如く第51回技能五輪全国大会Webデザイン演習さかなやフジ家55高橋雅人カレーラーメン麺やOK麺屋ココイチIllustratorSVGライアン・ウッドワードプラネタリウムマーサ・グレアム5月11日Googleロゴ鈴木ゲーム大賞アマチュア部門東京ゲームショウ神戸神戸国際展示場ゴールデンウィークGATEバルサマン3JAPANWORLDCUPMagnumプロジェクションマッピング恵那市岩村DRAGONドラゴンゲート愛知淑徳大学みつけものOhanaメールマガジン尾花大輔第7回若年者ものづくり競技大会Bloom*BlockBloosumTeam東京ゲームショウ2012TOKYOFacebookページMILKSHOWGAMEイマジンカップNHN敢闘賞ツインメッセ静岡静岡県ロゴマーク迎春2011年度StationFuturedocomoドコモ10日でおぼえるLinuxサーバー入門教室トライデント合同企業説明会2015年度Crayon新入生WF1でBLOGインターンシップSyntaxHighlighter竹中民男夏麺フェア木村哲朗森田霞スマートフォンサイトUI図鑑CSS3&jQueryで作る第52回技能五輪全国大会HTMLbutton要素datalist要素オリエンタル麺の匠名古屋駅麺通りNCF2014新年のご挨拶親孝行八木智章ScrollmagicFlexibleBox岡田陽一Flexbox味仙CGスペシャリストDmm.comUXデザインPlatformKaizenアクティビティシナリオ源賢司松田洋樹3DCGアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.jsScrollMagic建設経営者倶楽部ワクワク建設タウン東京コスモクリスマス熊﨑彩第53回keygen要素optgroup要素table名古屋マークアップ勉強会テーブル宇野剛志石原愛実マカベン熊野古道那智の大滝本州最南端串本八鬼山ランチ中村健太DesignergoogleGWDF81教室parseInt()parseFloat()道家陽介concrete5栗山聡一備忘録大門坂熊野三山青山敬司結団式山田拓生加藤ひとみ西岡克真アイチータ授業type属性紅茶専門店Liyn-anアイテムカンパニーネイルサロンマウアAnimationAO丸田屋丸高アロチ本家和歌山中華そば岩出本店スパルタキャンプ特別授業青空学区名古屋市営地下鉄柏木祥太北岡弘至

メールフォーム

名前:
メールアドレス:
件名:
本文:

東京コスモ
トライデントコンピュータ専門学校
教務課のびのび日記
Pagetop