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

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

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

※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年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
学生ブログリンク
<1年生ブログ>

WF1でBLOG 2017

<Webデザイン学科2年生ブログ>
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科WCAN業界研究技能五輪ウェブデザイン職種ウェブデザイン若年者ものづくり競技大会2013名古屋Webサイト映画ECCコンピュータ専門学校ポートフォリオ2009Winter学生ブログWebデザインWebサイト制作WordPress2011JavaScript礒田優かっぱ商店街入学式cmsNagoyaライトニングトーク卒業制作展矢野りんa-blogWordpress2014技能五輪全国大会SummerCGイラスト学科Web瀬川大勝テンプレート作成石黒雄介ホームページ・ビルダーAutumn若年者ものづくり大会オープンキャンパス面白法人カヤックアクアリング1年生進級展2012第48回技能五輪全国大会大阪東京研修杉本拓也miniinアクセス解析ウェブデザイン技能競技会html5Flash体験入学JapanHCD2010GIO名古屋駅あいちカレーラーメンコンテストIIJココストアAdobe2015Web制作会社gifアニメ水野裕太CentOSラーメン卒業制作専門学校企業訪問Google卒展田中睦翔人間中心設計マール情報デザインフォーラム学生99eagleBananaAdCSS3合同企業展プレゼンテーションWebワークショップ上村水月情報デザインHTML5ウェブデザイン技能検定愛知県プロジェクトセントレアブログパーツ成田篤紀SpringCMStextarea要素output要素岩手県option要素カリキュラムlabel要素form要素Likefieldset要素legend要素select要素学生インタビューinput要素グループ制作FICCまぼろしうぇーぶナゴヤドーム知多みるくparticlecanvas1年生作品展サイバーエージェント長屋めぐみWEBサイト制作者のためのHCDの理解in名古屋SEO真鍋大度中日ドラゴンズスマホアプリアンティー・ファクトリー企業課題名商連モンキーワークス産学協同スマートフォン鷹野雅弘茂森仙直WordFesトライデント合同企業展ワークショップカメラ和み2008CalendarAdvent写真5T(ファイヴティー)作品集笈瀬本通り空気人形堀尾真衣ビジュアルエディタたこ焼きAnalyticsWebデザインギャラリー佐藤歩レイアウトCSSイラストマップ結果発表トライデントUXiPhoneForumBox塚本碧WordCamp熊谷佳紀F-site名古屋市科学館名古屋開府400年祭静岡阿部淳也卒業式jQuery会社訪問DTPWORLDWebクリエイター能力認定試験閉館日導入授業サーティファイ幕張メッセMarkup就職活動林田実樹豊田市美術館CSSNite謹賀新年Appleメ~テレコミュニケーションデザインワークショップ初期設定戸田芳裕Storeポートフォリオサイト情報デザイン基礎ディプロスウェブデザイン技能競技大会Yahoo!JapanRunstantjbstyleアサココ!中部国際空港株式会社ブラザー工業株式会社WasSalsaCODEポスターデザイン・コンペティションAndrioid増田悟アクセシビリティWEBサイト制作者のためのHCD(人間中心設計)の理解小林信次ITCIRCUS夢プロジェクト2009・成果報告会IA2010キックオフセミナー株式会社アクアリングウェブリテラシー協会第一回セミナー慶華飯店iPhone4森川眞行広島弁GoogleAnalytics会社見学タロヲ横浜デジタルアーツペルソナ1→10design細川太郎石井研二カメラワークAnd金シャチ商店街ThenThereNIKE新横浜ラーメン博物館箱根合宿商店街柴乃櫂人横浜中華街名古屋メディアボンドGA名古屋クリエイターフットサル鎌倉CODEシナリオ技能五輪予選ネスカフェゴールドブレンド大沢たかおWEBサイト制作者のためのHCDの理解道頓堀新世界求人ポスターデザイン・コンペディショングラフィクデザインスタジオジブリ・レイアウト展Twitter知多半島三蔵松坂屋美術館unoplusフナ犬ポートピア名古屋プロ野球プチ・フレーズ笈瀬本通商店サイト制作愛知商業高校名チャリサーバーみの治商店IAチタハン10名駅経済新聞餃子福みつ名古屋サイト改善研究会中級編UltimateWCAN46ビジュアルデベロップメントナゴヤ伊藤頼子プロトコル分析YORKE.武将都市TAFF武豊アニメーションフェスティバル名古屋おもてなし武将隊名古屋グランパス浜松ITホワイトボックスFINALアートアニメーション武豊町TAFF'09FANTASYVIICOMPLETECHILDRENADVENT広告批評WCAN×CSSNiteWebリテラシーデッサンDesign造形基礎HTML+CSS基礎西村真里子プレゼン演習ActionScript基礎TokyoLabuatファルコム音楽フリー宣言音楽ゲーム荒俣宏UNIQLOヤノベケンジカスタマイズセミナーCALENDAR日本ファルコム□□□switch「ヤノベケンジ-ウルトラ」展BlogUTZOOMワークスコーポレーションGENOウィルス山村浩二デコクレセキュリティCS4サムライStefanW+KTokyo(+CRUZ)QubibiArtlessSagmeisterHelvetica2008WinterWebDirectionEast'08デザインのへそNam丹下紘希WEBウェブデザイン部門カンファレンスTHECONTESTHPデザインデザインコンテスト01XRAYSIGGRAPHCollegeFLEXFLASHNightSakaeTEXTURE中村勇吾佐藤可士和MAXデザイナーのためのプログラミング入門鳥取VideopuppetryASIA鳥取砂丘デザインPHP愛知県美術館アンドリュー・ワイエスウルトラ展黒い太陽映画のオープニング閉会式ゆるキャラFlash-Gamesマクロマリオネットマークアップ演習FITCCREAMごはんとFlashwonderflKyotoストリートビューJAPANインターネットクリエイティブアワードYahoo!カラーAutumindotFesHCDプロセスブランディングロゴ公募教育勉強会おかだよういちペルソナ/シナリオ法情報デザイン教育勉強会浅野智ペルソナ&シナリオ法横浜デジタルアーツ専門学校3校合同発表会クリ博就職フェスタウェブDeBLOGヨウイチコピーライティング小野裕子#infoedu山崎デザイン事務所スーパーエレメンツイラストコンテストデュエル・マスターズ長谷川恭久世界のCMフェスティバルPHP勉強会電信柱エレミの恋ウサビッチカナバングラフィックスコマ撮りアニメソバットシアターアイディグラフィックス学生参加CMS特集富岡聡学科国家検定インターネットスキル認定普及協会ライブペイント西田幸司ヱヴァンゲリヲン新劇場版:破旭食品サンプル製作所食品サンプルActionScript今井佳子グラフィックデザインUNIQLOCKギレン総帥LPOナゴヤデザインウィーク2009是枝裕和監督大富豪スコアシート東京ゲームショウ2009人喰いの大鷲トリコ第4回アックゼロヨン・アワードCG・イラストコンテスト後期入賞ガンダムMozoramaアニメーションモーション演習animationescalator日本電子専門学校3CGスペシャリスト松田洋樹3DCG東京コスモ味仙FlexboxUXデザインDmm.com岡田陽一FlexibleBoxクリスマス熊﨑彩Velocity.jsScrollMagicScrollmagic八木智章Webアクセシビリティアクセシビリティからはじめる、WebサイトのUXデザイ第53回ワクワク建設タウン建設経営者倶楽部源賢司アクティビティシナリオウェブアートデザイナーうぇ~~~~~~~ぶワイヤーフレーム仕事レスポンシブWebデザイン職業実践専門課程専門士学位出席率UIバイドゥグロースハッカーグロースハックPlatformKaizen14高校平野健太郎ポートフォリオアイデア帳採用担当者の心に響く竹中民男夏麺フェアoptgroup要素type属性紅茶専門店Liyn-anアイテムカンパニーkeygen要素datalist要素第52回技能五輪全国大会HTMLbutton要素ネイルサロンマウア授業加藤ひとみ西岡克真AnimationAO山田拓生青山敬司アイチータ結団式愛知県選手団オリエンタル麺の匠森田霞HighlighterSyntaxCrayonマークアップエンジニアアップルップル飯田淳介フロントエンドエンジニア木村哲朗2015年度新入生NTTドコモ東海NCF2014新年のご挨拶親孝行名古屋駅麺通りCSS3&jQueryで作るWF1でBLOGインターンシップスマートフォンサイトUI図鑑合同制作合宿合同制作HTMLCollectionNodeList美大芸大appendChild()Webプログラミング初級講座お母さんの二度見展学習進級展マイクロソフト水野怜美株式会社LIGいな世驛麺通り再進学醐りょうインスタグラム料理ドラマInstagramライデントコンピュータ専門学校ECMAScript山川綾那鈴木雄太フォトアルバムスタジオディテイルズ株式会社エイチーム梅澤朝樹出張講座尾鷲高校衣台高校服部友厚佐藤洋介SyntaxHighlighter制作合宿ES2015ES6v4.0.1WCAN2017Springターミナル学校Proxy学園祭情報系カークスヴィルIA/UXプラクティス平野秀幸坂本貴史沼田啓助河地芳明CodePenプログラムクイズAO入試制作実績津田直明WebディレクターWeb制作のおしごと懇親会合宿WebデザイナーWebプログラマー2016原一浩坂本邦夫JSBinJSFiddle夏休みジムナストコロン日清食品グループタカガールサイト夏季閉館日トライデント祭りMonaca学生作品集沖縄水曜日のカンパネラプラネタリアン涼麺jsdo.itCodeplyPlunker駅麺通りクイズResurgenceDay:Independence特別授業青空学区東京ゲームショウ神戸神戸国際展示場ゲーム大賞アマチュア部門Ohanaツインメッセ静岡静岡県ロゴマークメールマガジン鈴木プラネタリウムGATEDRAGONドラゴンゲート愛知淑徳大学ゴールデンウィークGoogleロゴライアン・ウッドワードマーサ・グレアム5月11日敢闘賞迎春GAMETOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会SHOWベースキャンプ名古屋IllustratorSVGFacebookページ尾花大輔Bloom*BlockFuturedocomoドコモ2011年度StationNHNBloosumTeamイマジンカップみつけもの恵那市岩村キルターズフェスティバル2011笈瀬本通商店街名古屋市中村区FLAVER3.0放課後のプレアデスSUBARU日本の四季中部国際空港GAINAXFLV8341-3:2010PluginLoadLazy大西健太forSlimbox2XJISウェブリテラシー協会キルト展愛知県立芸術大学北岡弘至伊達千代DTPの勉強部屋ablogcmsMagnumJAPANWORLDCUPプロジェクションマッピングバルサマンノートPC貸与トライデントカレッジCustomSmilies絵文字円JOY!map卒業・修了制作展KtaistyleぬいぐるみのラパンUntitled!!!!!!!!英国王のスピーチ卒業制作・研究発表会2011長野結果parseInt()DesignergoogleGWDparseFloat()備忘録中村健太道家陽介concrete5栗山聡一F81教室トライデント合同企業説明会HTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーlist-itemdisplayKDDIジョルテ10日でおぼえるLinuxサーバー入門教室卒業研究制作展最優秀賞ランチ石原愛実丸高アロチ本家和歌山中華そば熊野三山丸田屋岩出本店名古屋市営地下鉄柏木祥太スパルタキャンプ大門坂那智の大滝名古屋マークアップ勉強会tableテーブル宇野剛志マカベン熊野古道本州最南端串本八鬼山list-style-typeNTTドコモ東海支社木下健太郎就職東京佐藤ねじThree.jsプレゼンRhizomatiks田代豊たにぐちまことみんなのICTウェブアクセシビリティ画像をチェックボタンにする張山大祐JQuery第50回MuseWeb制作合宿モリサワFacebookたこ焼きパーティinspiredbyNEXT高橋雅人カレーラーメン麺やOKCOMMUNICATIONAWARDNCF2013美術大学芸術大学麺屋ココイチフジ家55あいちトリエンナーレ2013そこにいない。展PARTYPerfumeWebデザイン演習第51回技能五輪全国大会さかなや晴れやか嵐が如く田中稚妃呂

メールフォーム

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

東京コスモ
トライデントコンピュータ専門学校
Pagetop