ウェブ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デザイン2009WinterJavaScript1年生進級展Webサイト制作WordPress技能五輪全国大会2011礒田優かっぱ商店街オープンキャンパスアクアリング入学式cmsa-blogWebWordpress卒業制作展ライトニングトーク卒展Nagoya矢野りんアクセス解析2014CGイラスト学科体験入学若年者ものづくり大会卒業制作Web制作会社瀬川大勝面白法人カヤック合同企業展AutumnCSSSummerホームページ・ビルダーテンプレート作成石黒雄介第48回技能五輪全国大会ウェブデザイン技能競技会東京研修杉本拓也html5大阪名古屋駅HCDminiココストアあいちカレーラーメンコンテスト20152012AdobeJapan2010学生インタビューウェブデザイン技能競技大会HTML5inFlash閉館日GIOIIJ佐藤歩display:gridグリッドレイアウトgifアニメGridLayout夏季閉館日UXサイバーエージェント水野裕太北濱大輔SpringWebデザインギャラリー夏休み企業訪問トライデント祭りセントレアプロジェクト愛知県2018jQueryCSS3ブログパーツ学生専門学校COMMUNICATIONNEXTBananaAdWebクリエイター能力認定試験マール林田実樹ウェブデザイン技能検定フォトアルバム情報デザインフォーラム田中睦翔99eagle人間中心設計ラーメンCentOSGoogle制作合宿情報デザインWebワークショップ上村水月プレゼンテーション成田篤紀和みスマートフォンAWARDselect要素アップルップルフロントエンドエンジニアマークアップエンジニアparticleまぼろしcanvas飯田淳介Yahoo!Japan初期設定サーティファイ謹賀新年熊谷佳紀2008幕張メッセうぇーぶ1年生作品展legend要素愛知県選手団fieldset要素label要素たこ焼きform要素input要素textarea要素NTTドコモ東海スマホアプリ長屋めぐみoutput要素option要素Forum名古屋市科学館モンキーワークスウェブDeBLOGワークショップ結果発表iPhoneSEO空気人形カメラ写真名商連WEBサイト制作者のためのHCDの理解in名古屋トライデントイラストマップトライデント合同企業展笈瀬本通りカリキュラムCMS情報デザイン基礎DTPWORLDアサココ!WebリテラシーStore企業課題AppleディプロスWordCampMarkupjbstyle名古屋開府400年祭F-site導入授業豊田市美術館中日ドラゴンズナゴヤドーム真鍋大度塚本碧岩手県アンティー・ファクトリーFICCポートフォリオサイト静岡Likeレイアウト5T(ファイヴティー)AdventWordFes作品集モリサワウェブアクセシビリティ鷹野雅弘阿部淳也産学協同茂森仙直堀尾真衣AnalyticsCSSNite知多みるく戸田芳裕Pluginビジュアルエディタグループ制作コミュニケーションデザインワークショップ就職活動会社訪問メ~テレ卒業式CalendarBox学習出張講座水野怜美株式会社LIG進級展沖縄久保怜也WebデザイナーエイチームRunstant鈴木優太ドラマ信州アプリコンテスト[ゼロ]2017アプリコンテストES6ES2015浅野智GOペルソナ&シナリオ法3校合同発表会クリ博就職フェスタイラストコンテスト第56回ペルソナ/シナリオ法沖縄県pictureおかだよういちヨウイチ情報デザイン教育勉強会横浜デジタルアーツ専門学校森川眞行夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーOculusSalsaIA2010キックオフセミナーVRカルタ浜松青山高校出前授業東京ゲームショウ2018WasThere箱根合宿デュエル・マスターズ会社見学鎌倉横浜中華街新横浜ラーメン博物館ThenAndNIKE慶華飯店日本電子専門学校srcsetcymaカラーストリートビューAutuminEC事業dotFesHCDプロセスブランディング斉藤洸貴JAPANインターネットクリエイティブアワード東京ゲームショウ2009人喰いの大鷲トリコ是枝裕和監督大富豪スコアシートPHP勉強会Yahoo!世界のCMフェスティバルITホワイトボックスKyotowonderfl#infoedu教育勉強会ロゴ公募小野裕子コピーライティングスーパーエレメンツsource山崎デザイン事務所FITCCREAM第56回技能五輪全国大会ゆるキャラFlash-Games閉会式映画のオープニングごはんとFlashマークアップ演習マクロマリオネット長谷川恭久冨田伴成WWW(Welcome名古屋グランパスチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解友章笈瀬本通ポスターデザイン・コンペディションCODE名古屋クリエイターフットサルAndrioidtoペルソナ1→10design細川太郎タロヲシナリオiPhone4ITCIRCUS柴乃櫂人広島弁グラフィクデザイン堀川増田悟名古屋サイト改善研究会安藤中級編小林信次CODEポスターデザイン・コンペティションブラザー工業株式会社中部国際空港株式会社Webアプリ名駅経済新聞名チャリプチ・フレーズ三蔵みの治商店Twitter商店サイト制作志維愛知商業高校GAUltimate商店街金シャチ商店街求人新世界道頓堀JIHYE大沢たかおネスカフェゴールドブレンドフナ犬ホ・ジヘHEO藤井英一ナゴヤイークリエイトNextDoor新城高校福みつWCAN46TAFF武将都市名古屋おもてなし武将隊武豊アニメーションフェスティバルポートピア名古屋プロ野球ビジュアルデベロップメント伊藤頼子プロトコル分析World)YORKE.IA名古屋メディアボンドアクセシビリティサーバーWEBサイト制作者のためのHCDの理解技能五輪予選知多半島期末テスト脆弱性なんと読む?韓国Webデザインスペシャルデースタジオジブリ・レイアウト展unoplus北川パーヤン松坂屋美術館餃子前川元成杉浦麻紀NightCollegeFLEXライフスタイル冬休みTEXTURE中村勇吾佐藤可士和SakaeFLASH落合祐介eatmarkerフェンシングエペPHPデザイナーのためのプログラミング入門信州アプリコンテストゼロMAX足立丈也、平子卓哉、増田隼也サムライCS4TAFF'09広告批評WCAN×CSSNite西村真里子武豊町アートアニメーションVIIFANTASYFINAL2019ソレコン☆ポスコン茂森デッサンDesign仙直コンテスト造形基礎プレゼン演習ActionScript基礎HTML+CSS基礎愛知県美術館アンドリュー・ワイエス三瓶HPデザインデザインコンテストYearNew2019年新年あけましておめでとうHappy01CONTESTウェブデザイン部門ICSカンファレンスマイクロインタラクション池田泰延MILKTHEWEBメンバーズ丹下紘希NamSIGGRAPHスポーツアナリティクス株式会社LIGHTzclassesASIAVideopuppetryデザイン鳥取砂丘鳥取XRAY2008WinterStefanW+KTokyo(+CRUZ)QubibiArtlessSagmeisterHelveticaWebDirectionEast'08デザインのへそ令和2年ADVENTCHILDRENカナバングラフィックス富岡聡学科桝田草一ウサビッチ電信柱エレミの恋CMS特集株式会社サイバーエージェントソバットシアターコマ撮りアニメ牧野史門旭食品サンプル製作所国家検定インターネットスキル認定普及協会ライブペイントツール西田幸司ヱヴァンゲリヲン新劇場版:破食品サンプルUIデザインActionScript学生参加アイディグラフィックス第4回アックゼロヨン・アワードCG・イラストコンテストモーション演習animationコーヒー用品LPO株式会社アクアリングUNIQLOCKギレン総帥escalatorアニメーションガンダムあけおめグラフィックデザイン今井佳子入賞平成31年Mozoramaメーカー・ブランド後期黒い太陽ウルトラ展ワークスコーポレーション「ヤノベケンジ-ウルトラ」展祐司髙橋茜音GENOウィルスデコクレSTUDIOセキュリティBlogUTZOOM株式会社スタメン髙橋茜音COMPLETE松本渚株式会社アンティー・ファクトリーLabuatPhotoshopCS6Tokyo山村浩二LIG日本総合ビジネス専門学校株式会社MTG企業見学新入生オリエンテーションカスタマイズセミナー2020新卒ヤノベケンジFigma線の群生わたし、定時に帰ります。TBS音楽ゲーム日本ファルコム□□□switchファルコム音楽フリー宣言CBCCALENDARUNIQLO荒俣宏ナゴヤデザインウィーク2009フォントおじさん特別授業タカガールサイト青空学区名古屋市営地下鉄AOAnimation加藤ひとみ西岡克真水曜日のカンパネラ柏木祥太スパルタキャンプ熊野三山大門坂那智の大滝本州最南端和歌山中華そばアロチ本家岩出本店丸田屋丸高山田拓生青山敬司optgroup要素涼麺type属性駅麺通りjsdo.itCodeplybutton要素datalist要素keygen要素紅茶専門店Liyn-anアイテムカンパニーIndependenceDay:Resurgenceプラネタリアンクイズ結団式ネイルサロンマウア授業アイチータ串本八鬼山学園祭再進学驛麺通り卒業研究制作展情報系10日でおぼえるLinuxサーバー入門教室F81教室トライデント合同企業説明会Monaca最優秀賞ジョルテlist-style-typeいな世NTTドコモ東海支社displaylist-itemKDDIHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーGWDgoogle宇野剛志石原愛実ランチ日清食品グループテーブルtable熊野古道マカベン名古屋マークアップ勉強会ジムナストコロン中村健太parseFloat()parseInt()Designer備忘録学生作品集道家陽介concrete5栗山聡一HTMLPlunker懇親会FlexibleBoxFlexbox味仙岡田陽一Dmm.comアクティビティシナリオ源賢司UXデザインCGスペシャリスト松田洋樹熊﨑彩Webプログラマー第53回ワクワク建設タウンクリスマスWebディレクターWeb制作のおしごと3DCG東京コスモKaizenPlatformバイドゥ平野健太郎職業実践専門課程出席率UI仕事うぇ~~~~~~~ぶワイヤーフレームレスポンシブWebデザインポートフォリオアイデア帳採用担当者の心に響く合同制作合宿グロースハッカーグロースハック合同制作合宿専門士高校14学位建設経営者倶楽部坂本邦夫スマートフォンサイトUI図鑑CSS3&jQueryで作る河地芳明AO入試インターンシップ沼田啓助WF1でBLOGIA/UXプラクティスカークスヴィルプログラムクイズ名古屋駅麺通り麺の匠オリエンタル第52回技能五輪全国大会JSFiddle親孝行新年のご挨拶CodePenJSBinNCF2014新入生2015年度八木智章竹中民男原一浩夏麺フェアScrollmagicScrollMagicアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.js2016津田直明HighlighterSyntaxCrayon平野秀幸森田霞木村哲朗制作実績坂本貴史NCF2013醐りょうみつけもの恵那市岩村プロジェクションマッピングバルサマン愛知淑徳大学ドラゴンゲートゴールデンウィークGATEDRAGON3JAPANWORLDCUPAWARDSトライデントカレッジUntitled!!!!!!!!ablogcmsDTPの勉強部屋Magnum北岡弘至伊達千代Googleロゴ5月11日Ohanaゲーム大賞アマチュア部門東京ゲームショウノートPC貸与メールマガジンロゴマークツインメッセ静岡静岡県尾鷲高校神戸神戸国際展示場プラネタリウム出身高校ライアン・ウッドワードマーサ・グレアムD3.jsスクラップブック夏休みの課題鈴木TOCTableJISウェブリテラシー協会Slimbox2forX8341-3:2010名古屋市中村区FLAVER3.0FLV関口浩之Loadミス・ユニバース・ジャパン岐阜大会GoogleAnalytics石井研二カメラワーク横浜デジタルアーツウェブアートデザイナーLazy大西健太田中稚妃呂笈瀬本通商店街堀川友章CustomSmilies絵文字Contents円JOY!mapKtaistyleぬいぐるみのラパン英国王のスピーチ卒業制作・研究発表会2011of卒業・修了制作展愛知県立芸術大学SUBARU放課後のプレアデスキルターズフェスティバル2011GAINAX中部国際空港安藤志維キルト展日本の四季敢闘賞迎春Rhizomatiks田代豊たにぐちまことプレゼンinspiredbyそこにいない。展PARTYPerfumeThree.js木下健太郎お母さんの二度見展Facebookたこ焼きパーティWeb制作合宿みんなのICT佐藤ねじマイクロソフト就職東京あいちトリエンナーレ2013Webプログラミング初級講座カレーラーメン麺やOK麺屋ココイチフジ家55高橋雅人Instagram美術大学芸術大学インスタグラム料理さかなや第51回技能五輪全国大会Webデザイン演習HTMLCollectionappendChild()NodeList美大晴れやか嵐が如く芸大ECMAScriptSyntaxHighlighterTeamイマジンカップ服部友厚NHNBloosumBloom*Blockターミナル佐藤洋介尾花大輔スタジオディテイルズ鈴木雄太株式会社エイチーム2011年度梅澤朝樹衣台高校ドコモdocomo山川綾那StationFuture第7回若年者ものづくり競技大会東京ゲームショウ2012JQuery第50回結果長野張山大祐画像をチェックボタンにするv4.0.1WCAN2017SpringMuseIllustratorSVGSHOWGAMETOKYO学校ベースキャンプ名古屋FacebookページフロントエンドProxyNCF2017

メールフォーム

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

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