ウェブ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
検索フォーム
Yahoo!基金
台風21号で被災されたみなさま、また、北海道を震源とする地震で被災されたみなさまに、心からお見舞い申し上げます。
プロフィール

担当: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」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
「第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回技能五輪
<若年者ものづくり競技大会>
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種ウェブデザインWebサイト映画若年者ものづくり競技大会2013名古屋ECCコンピュータ専門学校ポートフォリオ学生ブログWebデザイン2009WinterWebサイト制作技能五輪全国大会1年生進級展JavaScript2011WordPress礒田優かっぱ商店街入学式2014cmsWeba-blogライトニングトークWordpressオープンキャンパスアクアリング卒業制作展Nagoya矢野りん卒業制作石黒雄介合同企業展Autumnアクセス解析Summerホームページ・ビルダー面白法人カヤックテンプレート作成瀬川大勝卒展若年者ものづくり大会CGイラスト学科CSSJapan東京研修あいちカレーラーメンコンテスト2012学生インタビューin第48回技能五輪全国大会佐藤歩ウェブデザイン技能競技会IIJhtml5miniGIOHCD体験入学名古屋駅Web制作会社Adobe大阪2010Flash杉本拓也ココストア2015HTML5情報デザインマールWebワークショップjQuery成田篤紀CSS3愛知県学生Webクリエイター能力認定試験99eagle上村水月サイバーエージェントウェブデザイン技能競技大会情報デザインフォーラム閉館日企業訪問Googleセントレアラーメンウェブデザイン技能検定ブログパーツプレゼンテーション田中睦翔COMMUNICATIONGridLayout専門学校Webデザインギャラリーグリッドレイアウトプロジェクトdisplay:grid北濱大輔人間中心設計水野裕太BananaAdgifアニメSpring2018NEXTCentOS熊谷佳紀label要素form要素AWARDカリキュラムCMS謹賀新年写真UXForumサーティファイトライデント合同企業展イラストマップトライデント初期設定名商連カメラワークショップfieldset要素レイアウトスマートフォンたこ焼き林田実樹iPhone戸田芳裕結果発表5T(ファイヴティー)Adventマークアップエンジニア長屋めぐみCalendarparticlecanvasまぼろしうぇーぶ1年生作品展スマホアプリNTTドコモ東海ナゴヤドーム知多みるくフロントエンドエンジニア中日ドラゴンズ幕張メッセモンキーワークスWEBサイト制作者のためのHCDの理解in名古屋作品集愛知県選手団legend要素SEOinput要素空気人形option要素output要素select要素textarea要素Yahoo!JapanWordFes和みウェブアクセシビリティWebデザイナー制作合宿Box学習進級展DTPWORLD情報デザイン基礎コミュニケーションデザインワークショップフォトアルバムWebリテラシー阿部淳也静岡水野怜美Analytics沖縄トライデント祭り夏季閉館日導入授業WordCamp株式会社LIGアサココ!ディプロス名古屋市科学館出張講座卒業式会社訪問就職活動鈴木優太メ~テレ茂森仙直ビジュアルエディタ2008鷹野雅弘Plugin企業課題2017AppleStore産学協同久保怜也堀尾真衣グループ制作信州アプリコンテスト[ゼロ]アプリコンテスト夏休みポートフォリオサイトCSSNite真鍋大度Runstantアンティー・ファクトリーFICC名古屋開府400年祭MarkupLike笈瀬本通りjbstyle岩手県F-site塚本碧豊田市美術館ウェブリテラシー協会Slimbox2道頓堀JISforWEBサイト制作者のためのHCD(人間中心設計)の理解ナゴヤXAndrioidチタハン10ペルソナ大沢たかお細川太郎田中稚妃呂名古屋グランパス1→10design大西健太新世界求人LoadLazy武将都市武豊アニメーションフェスティバル放課後のプレアデス餃子キルターズフェスティバル2011柴乃櫂人浜松SUBARUITCIRCUS中部国際空港ビジュアルデベロップメントGAINAX福みつ広島弁FLV8341-3:2010WCAN46TAFFシナリオFLAVER3.0笈瀬本通商店街iPhone4名古屋市中村区名古屋おもてなし武将隊伊藤頼子名古屋サイト改善研究会名古屋メディアボンドアクセシビリティ中級編金シャチ商店街増田悟技能五輪予選プチ・フレーズ小林信次商店街名駅経済新聞名チャリTwitter松坂屋美術館みの治商店Ultimateスタジオジブリ・レイアウト展unoplus三蔵愛知商業高校知多半島GACODEポスターデザイン・コンペティション商店サイト制作YORKE.タロヲ笈瀬本通カメラワークフナ犬石井研二横浜デジタルアーツネスカフェゴールドブレンドプロトコル分析GoogleAnalyticsポートピア名古屋名古屋クリエイターフットサル中部国際空港株式会社ポスターデザイン・コンペディショングラフィクデザインWEBサイト制作者のためのHCDの理解CODEブラザー工業株式会社IAプロ野球株式会社アクアリングサーバーwonderflTokyoCOMPLETECHILDRENADVENTLabuatUTZOOMGENOウィルスワークスコーポレーション「ヤノベケンジ-ウルトラ」展BlogVIIFANTASYWCAN×CSSNite西村真里子プレゼン演習ActionScript基礎広告批評TAFF'09FINALアートアニメーション武豊町セキュリティデコクレインターネットスキル認定普及協会ライブペイント黒い太陽ウルトラ展国家検定西田幸司食品サンプルActionScriptヱヴァンゲリヲン新劇場版:破ヤノベケンジカスタマイズセミナーゲーム日本ファルコム□□□switch山村浩二音楽ファルコム音楽フリー宣言CALENDARUNIQLO荒俣宏HTML+CSS基礎造形基礎SagmeisterStefanW+KTokyo(+CRUZ)QubibiHelveticaデザインのへそSIGGRAPHXRAY2008WinterWebDirectionEast'08ArtlessNamTHEWEBウェブデザイン部門カンファレンスCONTEST01丹下紘希HPデザインデザインコンテストASIAVideopuppetry中村勇吾佐藤可士和SakaeNightTEXTUREサムライデッサンDesignCS4CollegeFLEXアンドリュー・ワイエスデザイン鳥取砂丘鳥取愛知県美術館PHPFLASHMAXデザイナーのためのプログラミング入門旭食品サンプル製作所学科長谷川恭久スーパーエレメンツ山崎デザイン事務所コピーライティングデュエル・マスターズイラストコンテストペルソナ/シナリオ法情報デザイン教育勉強会ウェブDeBLOGヨウイチ小野裕子#infoeduマークアップ演習マクロマリオネット映画のオープニング閉会式ごはんとFlashCREAM教育勉強会ロゴ公募FITCおかだよういち浅野智ThenAndNIKE慶華飯店ThereWas夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーSalsa新横浜ラーメン博物館横浜中華街横浜デジタルアーツ専門学校3校合同発表会クリ博就職フェスタペルソナ&シナリオ法日本電子専門学校鎌倉箱根合宿森川眞行会社見学ゆるキャラFlash-GamesMozorama後期入賞ガンダムアニメーションescalatorCG・イラストコンテストモーション演習animationグラフィックデザイン今井佳子電信柱エレミの恋ウサビッチカナバングラフィックス富岡聡コマ撮りアニメソバットシアターアイディグラフィックス学生参加CMS特集第4回アックゼロヨン・アワードLPOAutuminカラーストリートビューJAPANインターネットクリエイティブアワードブランディングHCDプロセス日本の四季KyotodotFesYahoo!世界のCMフェスティバル是枝裕和監督ナゴヤデザインウィーク2009UNIQLOCKギレン総帥人喰いの大鷲トリコ東京ゲームショウ2009ITホワイトボックスPHP勉強会大富豪スコアシートIA2010キックオフセミナー2011年度カークスヴィルIA/UXプラクティス平野秀幸坂本貴史沼田啓助河地芳明JSBinCodePenプログラムクイズAO入試制作実績津田直明懇親会合宿合同制作合同制作合宿Web制作のおしごとWebディレクター2016原一浩坂本邦夫WebプログラマーJSFiddlePlunker情報系Monaca学生作品集ジムナストコロン学園祭再進学醐りょういな世驛麺通り日清食品グループタカガールサイト駅麺通り涼麺jsdo.itCodeplyクイズIndependence水曜日のカンパネラプラネタリアンResurgenceDay:専門士学位東京コスモクリスマス熊﨑彩第53回3DCG松田洋樹FlexibleBoxFlexbox味仙CGスペシャリストワクワク建設タウン建設経営者倶楽部竹中民男夏麺フェア飯田淳介木村哲朗八木智章Scrollmagicアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.jsScrollMagic岡田陽一Dmm.com仕事UIバイドゥ平野健太郎ワイヤーフレームうぇ~~~~~~~ぶ出席率職業実践専門課程レスポンシブWebデザインウェブアートデザイナーポートフォリオアイデア帳採用担当者の心に響くKaizenアクティビティシナリオ源賢司UXデザインPlatformグロースハック高校14グロースハッカーインスタグラムInstagram冨田伴成イークリエイト藤井英一JIHYE新城高校青山高校OculusVRカルタ東京ゲームショウ2018出前授業HEOホ・ジヘtoWWW(Welcome友章堀川World)北川パーヤン韓国脆弱性なんと読む?期末テストWebデザインスペシャルデーGO第56回株式会社サイバーエージェントあけおめ平成31年メーカー・ブランド桝田草一牧野史門線の群生FigmaツールUIデザインコーヒー用品前川元成srcsetsourcepicture沖縄県第56回技能五輪全国大会エイチームNextDoor斉藤洸貴cymaEC事業志維安藤WCAN2017Springv4.0.1SyntaxHighlighterES2015Proxy学校スタジオディテイルズ服部友厚佐藤洋介ターミナルES6ECMAScript美大芸大料理ドラマNodeListHTMLCollectionお母さんの二度見展マイクロソフトWebプログラミング初級講座appendChild()鈴木雄太山川綾那安藤志維ContentsofTable堀川友章関口浩之WebアプリNCF2017ミス・ユニバース・ジャパン岐阜大会フォントおじさんTOCAWARDS尾鷲高校衣台高校梅澤朝樹株式会社エイチームノートPC貸与夏休みの課題出身高校D3.jsスクラップブックアップルップル森田霞ベースキャンプ名古屋SHOWGAMETOKYOFacebookページSVG第50回結果長野Illustrator東京ゲームショウ2012第7回若年者ものづくり競技大会StationFuturedocomoドコモNHNイマジンカップ尾花大輔Bloom*BlockBloosumTeamJQuery張山大祐Rhizomatiks田代豊たにぐちまことプレゼンinspiredbyあいちトリエンナーレ2013そこにいない。展PARTYPerfumeThree.js木下健太郎たこ焼きパーティWeb制作合宿Muse画像をチェックボタンにするFacebookモリサワ就職東京佐藤ねじみんなのICT2020新卒迎春北岡弘至伊達千代DTPの勉強部屋ablogcmsMagnumJAPANWORLDCUP恵那市岩村プロジェクションマッピングバルサマン3トライデントカレッジ絵文字円JOY!map卒業・修了制作展愛知県立芸術大学CustomSmiliesKtaistyleUntitled!!!!!!!!英国王のスピーチ卒業制作・研究発表会2011ぬいぐるみのラパンみつけもの愛知淑徳大学ゲーム大賞アマチュア部門東京ゲームショウ神戸神戸国際展示場Ohanaメールマガジン敢闘賞ツインメッセ静岡静岡県ロゴマーク鈴木ゴールデンウィークGATEDRAGONドラゴンゲートGoogleロゴ5月11日プラネタリウムライアン・ウッドワードマーサ・グレアムWebデザイン演習第51回技能五輪全国大会山田拓生加藤ひとみ西岡克真Animation青山敬司結団式アイテムカンパニーネイルサロンマウア授業アイチータAO特別授業丸高アロチ本家和歌山中華そば熊野三山丸田屋岩出本店青空学区名古屋市営地下鉄柏木祥太スパルタキャンプ紅茶専門店Liyn-antype属性インターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る名古屋駅麺通りWF1でBLOG新入生HighlighterSyntaxCrayon2015年度NCF2014新年のご挨拶button要素datalist要素keygen要素optgroup要素HTML第52回技能五輪全国大会親孝行麺の匠オリエンタル大門坂那智の大滝モテ声ボーダーlist-itemdisplaylist-style-typeHTML5スマートアプリ&クリエイティブコンテストKDDI10日でおぼえるLinuxサーバー入門教室卒業研究制作展最優秀賞ジョルテNTTドコモ東海支社NCF2013フジ家55さかなや晴れやか嵐が如く麺屋ココイチ麺やOK美術大学芸術大学高橋雅人カレーラーメントライデント合同企業説明会F81教室tableテーブル宇野剛志石原愛実名古屋マークアップ勉強会マカベン本州最南端串本八鬼山熊野古道ランチ中村健太parseInt()DesignergoogleGWDparseFloat()備忘録道家陽介concrete5栗山聡一キルト展

メールフォーム

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

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