ウェブ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年生進級展「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サイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
学生ブログリンク
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科WCAN業界研究技能五輪ウェブデザイン職種ウェブデザイン2013Webサイト若年者ものづくり競技大会映画名古屋ポートフォリオECCコンピュータ専門学校2009学生ブログWinterWebデザインWebサイト制作2011JavaScriptWordPressかっぱ商店街礒田優技能五輪全国大会1年生進級展矢野りんcmsWeb2014WordpressNagoyaa-blogライトニングトーク入学式卒業制作展Autumn若年者ものづくり大会石黒雄介アクアリングテンプレート作成CGイラスト学科面白法人カヤックアクセス解析Summerオープンキャンパスホームページ・ビルダー瀬川大勝あいちカレーラーメンコンテストGIO卒展mini大阪Japan合同企業展IIJ杉本拓也HCD2012Web制作会社東京研修卒業制作2010ウェブデザイン技能競技会CSShtml5ココストア2015第48回技能五輪全国大会名古屋駅Adobe体験入学inFlash専門学校マール学生閉館日田中睦翔情報デザインフォーラム成田篤紀CentOS情報デザインプレゼンテーション水野裕太WebワークショップGooglejQuerygifアニメCSS3ラーメンHTML5BananaAd人間中心設計ブログパーツ愛知県上村水月ウェブデザイン技能競技大会99eagleウェブデザイン技能検定セントレアSpring企業訪問プロジェクトselect要素CSSNiteAnalytics空気人形就職活動名古屋市科学館option要素阿部淳也ポートフォリオサイト長屋めぐみoutput要素静岡コミュニケーションデザインワークショップtextarea要素NTTドコモ東海産学協同カリキュラムメ~テレCMSビジュアルエディタPluginYahoo!Japan堀尾真衣particlecanvasinput要素SEO卒業式スマホアプリ1年生作品展まぼろしうぇーぶ会社訪問アンティー・ファクトリー作品集WordFes名商連WEBサイト制作者のためのHCDの理解in名古屋レイアウト写真ナゴヤドーム中日ドラゴンズスマートフォントライデント笈瀬本通りイラストマップAdvent5T(ファイヴティー)和みCOMMUNICATIONNEXTトライデント合同企業展カメラ知多みるくiPhoneWebデザインギャラリー塚本碧真鍋大度form要素fieldset要素Calendarlabel要素たこ焼き岩手県Boxワークショップ戸田芳裕LikeUX結果発表モンキーワークスForumFICClegend要素名古屋開府400年祭初期設定アサココ!豊田市美術館サーティファイRunstant熊谷佳紀学生インタビュー北濱大輔鷹野雅弘進級展StoreApplejbstyle茂森仙直謹賀新年企業課題グループ制作佐藤歩Webクリエイター能力認定試験株式会社LIG情報デザイン基礎DTPWORLDWordCampF-siteサイバーエージェントディプロス水野怜美Markupグリッドレイアウト制作合宿幕張メッセ林田実樹GridLayout導入授業display:grid2008PHPデザイナーのためのプログラミング入門unoplus技能五輪予選ビジュアルデベロップメントデザインアンドリュー・ワイエス名古屋メディアボンド金シャチ商店街タロヲ商店街アクセシビリティ愛知県美術館伊藤頼子プロトコル分析MAXYORKE.サーバーIAWEBサイト制作者のためのHCDの理解Night道頓堀Design新世界求人ネスカフェゴールドブレンド大沢たかおデッサンWebリテラシーTAFFWCAN46武豊アニメーションフェスティバル名古屋おもてなし武将隊ナゴヤ武将都市CS4サムライCollege鳥取砂丘FLEX知多半島松坂屋美術館スタジオジブリ・レイアウト展プロ野球ポートピア名古屋TEXTUREフナ犬中村勇吾佐藤可士和SakaeFLASH柴乃櫂人HPデザインCODEポスターデザイン・コンペティション小林信次中部国際空港株式会社デザインコンテスト株式会社アクアリングブラザー工業株式会社増田悟丹下紘希名チャリ愛知商業高校GA名駅経済新聞中級編名古屋サイト改善研究会Nam01CONTESTLoadウェブデザイン部門Lazyカンファレンスforウェブリテラシー協会Slimbox2大西健太田中稚妃呂WEBTHEカメラワーク石井研二横浜デジタルアーツGoogleAnalyticsUltimateArtlessXRAYAndrioidSIGGRAPH2008WinterWEBサイト制作者のためのHCD(人間中心設計)の理解WebDirectionEast'08チタハン10ITCIRCUS広島弁1→10designVideopuppetry鳥取ペルソナシナリオASIAiPhone4名古屋グランパスデザインのへそTwitterQubibiグラフィクデザインみの治商店三蔵商店サイト制作プチ・フレーズポスターデザイン・コンペディションCODESagmeisterHelveticaStefanW+KTokyo(+CRUZ)名古屋クリエイターフットサル笈瀬本通細川太郎西村真里子CALENDARJAPANインターネットクリエイティブアワードYahoo!ストリートビューカラーUNIQLOJIS世界のCMフェスティバルITホワイトボックス人喰いの大鷲トリコ是枝裕和監督ヤノベケンジ東京ゲームショウ2009カスタマイズセミナーPHP勉強会大富豪スコアシート荒俣宏ファルコム音楽フリー宣言Flash-GameswonderflKyotoゆるキャラ山村浩二映画のオープニング閉会式□□□switchdotFes音楽Autuminブランディングゲーム日本ファルコムHCDプロセスウルトラ展黒い太陽ガンダム学科グラフィックデザイン入賞旭食品サンプル製作所Mozorama後期今井佳子アイディグラフィックスソバットシアターコマ撮りアニメ電信柱エレミの恋カナバングラフィックスCMS特集学生参加富岡聡アニメーションescalatorライブペイントインターネットスキル認定普及協会第4回アックゼロヨン・アワードLPOギレン総帥ナゴヤデザインウィーク2009UNIQLOCK国家検定西田幸司ActionScript食品サンプルanimationモーション演習ヱヴァンゲリヲン新劇場版:破CG・イラストコンテストマクロマリオネットマークアップ演習ThereThenCHILDRENWasADVENTSalsaVIIAndNIKE箱根合宿森川眞行会社見学横浜中華街新横浜ラーメン博物館COMPLETE慶華飯店FANTASYウェブリテラシー協会第一回セミナープレゼン演習浜松ウサビッチActionScript基礎HTML+CSS基礎福みつ餃子WCAN×CSSNite広告批評IA2010キックオフセミナー夢プロジェクト2009・成果報告会FINALアートアニメーションTAFF'09武豊町鎌倉日本電子専門学校スーパーエレメンツ山崎デザイン事務所デコクレ長谷川恭久デュエル・マスターズGENOウィルスセキュリティコピーライティング小野裕子CREAMごはんとFlashFITCロゴ公募#infoedu教育勉強会イラストコンテストヨウイチクリ博就職フェスタペルソナ&シナリオ法浅野智Labuat3校合同発表会横浜デジタルアーツ専門学校TokyoUTZOOMBlog情報デザイン教育勉強会ウェブDeBLOGワークスコーポレーションペルソナ/シナリオ法おかだよういち「ヤノベケンジ-ウルトラ」展造形基礎プラネタリウムUIバイドゥ平野健太郎ポートフォリオアイデア帳仕事ワイヤーフレーム職業実践専門課程レスポンシブWebデザインウェブアートデザイナーうぇ~~~~~~~ぶ採用担当者の心に響く高校アクティビティシナリオ源賢司UXデザインDmm.comKaizenPlatform14グロースハッカーグロースハック出席率学位坂本貴史制作実績津田直明2016平野秀幸IA/UXプラクティスAO入試河地芳明沼田啓助カークスヴィル原一浩坂本邦夫合宿合同制作合同制作合宿専門士懇親会Web制作のおしごとWebプログラマーWebデザイナーWebディレクター岡田陽一FlexibleBox新入生WF1でBLOGインターンシップスマートフォンサイトUI図鑑2015年度Crayonマークアップエンジニア森田霞HighlighterSyntaxCSS3&jQueryで作る名古屋駅麺通り第52回技能五輪全国大会HTMLbutton要素datalist要素オリエンタル麺の匠NCF2014新年のご挨拶親孝行アップルップル木村哲朗クリスマス熊﨑彩第53回ワクワク建設タウン東京コスモ3DCGFlexbox味仙CGスペシャリスト松田洋樹建設経営者倶楽部アクセシビリティからはじめる、WebサイトのUXデザイ竹中民男夏麺フェア飯田淳介フロントエンドエンジニア八木智章ScrollmagicWebアクセシビリティVelocity.jsScrollMagicプログラムクイズCodePen衣台高校梅澤朝樹株式会社エイチーム山川綾那尾鷲高校出張講座D3.jsスクラップブック夏休みの課題ノートPC貸与鈴木雄太フォトアルバムProxyWCAN2017Springv4.0.1SyntaxHighlighter学校ターミナルスタジオディテイルズ服部友厚佐藤洋介出身高校AWARDS志維安藤WebアプリNCF2017堀川友章鈴木優太World)toWWW(Welcome信州アプリコンテスト[ゼロ]アプリコンテストofTableTOC2017Contents久保怜也ミス・ユニバース・ジャパン岐阜大会フォントおじさん関口浩之ES2015ES6日清食品グループタカガールサイト水曜日のカンパネラプラネタリアンジムナストコロン夏休み学生作品集沖縄トライデント祭り夏季閉館日ResurgenceDay:CodeplyPlunkerJSFiddleJSBinjsdo.it涼麺Independenceクイズ駅麺通りMonaca情報系appendChild()HTMLCollectionNodeList美大Webプログラミング初級講座マイクロソフトECMAScriptお母さんの二度見展学習芸大料理いな世驛麺通り再進学学園祭醐りょうドラマInstagramインスタグラムkeygen要素optgroup要素docomoドコモ2011年度迎春FutureStationBloosumTeamイマジンカップNHN敢闘賞ツインメッセ静岡東京ゲームショウ神戸神戸国際展示場ゲーム大賞アマチュア部門Ohana静岡県ロゴマークメールマガジンBloom*Block尾花大輔画像をチェックボタンにする張山大祐JQuery第50回MuseWeb制作合宿ウェブアクセシビリティモリサワFacebookたこ焼きパーティ結果長野GAMETOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会SHOWベースキャンプ名古屋IllustratorSVGFacebookページ鈴木北川パーヤン円JOY!map卒業・修了制作展愛知県立芸術大学キルト展絵文字CustomSmilies英国王のスピーチ卒業制作・研究発表会2011ぬいぐるみのラパンKtaistyle日本の四季中部国際空港名古屋市中村区FLAVER3.0FLV8341-3:2010笈瀬本通商店街キルターズフェスティバル2011GAINAXSUBARU放課後のプレアデスUntitled!!!!!!!!トライデントカレッジDRAGONドラゴンゲート愛知淑徳大学みつけものGATEゴールデンウィークライアン・ウッドワードマーサ・グレアム5月11日Googleロゴ恵那市岩村プロジェクションマッピング伊達千代DTPの勉強部屋ablogcms北岡弘至Magnumバルサマン3JAPANWORLDCUPみんなのICT佐藤ねじ八鬼山熊野古道マカベン名古屋マークアップ勉強会串本本州最南端和歌山中華そば熊野三山大門坂那智の大滝tableテーブルconcrete5栗山聡一備忘録parseFloat()道家陽介中村健太宇野剛志石原愛実ランチアロチ本家丸高結団式愛知県選手団青山敬司山田拓生アイチータ授業type属性紅茶専門店Liyn-anアイテムカンパニーネイルサロンマウア加藤ひとみ西岡克真柏木祥太スパルタキャンプ岩出本店丸田屋名古屋市営地下鉄青空学区AnimationAO特別授業parseInt()DesignerWebデザイン演習あいちトリエンナーレ2013そこにいない。展PARTY第51回技能五輪全国大会嵐が如く麺屋ココイチフジ家55さかなや晴れやかPerfumebyThree.js木下健太郎就職東京プレゼンたにぐちまことinspiredRhizomatiks田代豊麺やOKカレーラーメン卒業研究制作展最優秀賞ジョルテKDDI10日でおぼえるLinuxサーバー入門教室トライデント合同企業説明会googleGWDF81教室HTML5スマートアプリ&クリエイティブコンテストモテ声ボーダー美術大学芸術大学AWARD高橋雅人NCF2013NTTドコモ東海支社list-itemdisplaylist-style-typeX

メールフォーム

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

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