ウェブ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コンピュータ専門学校Winter2009学生ブログWebデザインWebサイト制作2011JavaScriptWordPressかっぱ商店街技能五輪全国大会礒田優卒業制作展Wordpressa-blog1年生進級展オープンキャンパスcms2014ライトニングトーク入学式Web矢野りんNagoya瀬川大勝アクセス解析テンプレート作成ホームページ・ビルダーAutumn若年者ものづくり大会石黒雄介SummerCGイラスト学科面白法人カヤックアクアリングHCDAdobehtml5卒展IIJminiFlash大阪JapanあいちカレーラーメンコンテストCSS第48回技能五輪全国大会名古屋駅ココストア2010Web制作会社in杉本拓也GIO2015東京研修卒業制作合同企業展体験入学2012ウェブデザイン技能競技会HTML5プロジェクトjQuery学生CSS3Springセントレアウェブデザイン技能競技大会愛知県ウェブデザイン技能検定成田篤紀マールブログパーツラーメン専門学校水野裕太Googlegifアニメプレゼンテーション情報デザインWebワークショップCentOS閉館日田中睦翔人間中心設計BananaAd企業訪問上村水月情報デザインフォーラム99eagleWordFes作品集5T(ファイヴティー)Forumselect要素長屋めぐみoutput要素option要素textarea要素NTTドコモ東海スマホアプリcanvasparticleまぼろしうぇーぶ1年生作品展input要素legend要素COMMUNICATIONスマートフォンNEXT和みCalendarUXレイアウトlabel要素fieldset要素form要素Webデザインギャラリーたこ焼きAdventCSSNiteCMSカリキュラムjbstyleMarkupF-site名古屋開府400年祭SEO空気人形ワークショップカメラモンキーワークス結果発表iPhone豊田市美術館導入授業グループ制作Apple企業課題茂森仙直2008鷹野雅弘StoreWebリテラシーディプロスWordCampアサココ!DTPWORLD情報デザイン基礎写真トライデント合同企業展コミュニケーションデザインワークショップポートフォリオサイト名古屋市科学館就職活動卒業式会社訪問静岡FICC岩手県Like塚本碧真鍋大度アンティー・ファクトリーメ~テレビジュアルエディタWEBサイト制作者のためのHCDの理解in名古屋中日ドラゴンズ名商連トライデント笈瀬本通りイラストマップナゴヤドーム知多みるく堀尾真衣Plugin産学協同Analytics戸田芳裕Box阿部淳也謹賀新年フォトアルバム初期設定熊谷佳紀林田実樹GridLayout幕張メッセ北濱大輔制作合宿サーティファイサイバーエージェント佐藤歩Runstant学生インタビュー株式会社LIG進級展水野怜美display:gridWebクリエイター能力認定試験グリッドレイアウトYahoo!Japan山崎デザイン事務所Instagramインスタグラム長谷川恭久イラストコンテストデュエル・マスターズコピーライティングスーパーエレメンツ#infoeduごはんとFlashマークアップ演習マクロマリオネットCREAMFITCヨウイチ教育勉強会ロゴ公募小野裕子情報デザイン教育勉強会鎌倉日本電子専門学校横浜デジタルアーツ専門学校会社見学森川眞行新横浜ラーメン博物館横浜中華街箱根合宿3校合同発表会クリ博就職フェスタ醐りょうペルソナ/シナリオ法映画のオープニングおかだよういちペルソナ&シナリオ法浅野智いな世ウェブDeBLOGドラマ美大ナゴヤデザインウィーク2009NodeList是枝裕和監督人喰いの大鷲トリコPHP勉強会大富豪スコアシート東京ゲームショウ2009UNIQLOCKギレン総帥モーション演習animationescalatorCG・イラストコンテスト第4回アックゼロヨン・アワードLPOHTMLCollectionITホワイトボックス世界のCMフェスティバルdotFes料理HCDプロセスKyotowonderfl慶華飯店ゆるキャラFlash-Gamesブランディング北川パーヤン芸大JAPANインターネットクリエイティブアワードYahoo!ストリートビューカラーAutumin鈴木優太閉会式NIKEプロトコル分析ResurgenceWEBサイト制作者のためのHCDの理解伊藤頼子ビジュアルデベロップメントサーバーIAYORKE.技能五輪予選プラネタリアン知多半島日清食品グループジムナストコロンタカガールサイトスタジオジブリ・レイアウト展unoplus水曜日のカンパネラ松坂屋美術館期末テストアクセシビリティITCIRCUS柴乃櫂人広島弁Day:Andrioid名古屋グランパスチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解iPhone4シナリオ商店街金シャチ商店街名古屋メディアボンドタロヲ細川太郎ペルソナ1→10designカンファレンスプロ野球情報系学園祭再進学Monaca浜松ウェブデザイン部門福みつ餃子IA2010キックオフセミナー夢プロジェクト2009・成果報告会ThereThenAndWasSalsaウェブリテラシー協会第一回セミナー驛麺通り学生作品集沖縄大沢たかお求人新世界ネスカフェゴールドブレンド夏休みポートピア名古屋フナ犬Webデザインスペシャルデー道頓堀夏季閉館日武豊アニメーションフェスティバルTAFFWCAN46名古屋おもてなし武将隊武将都市トライデント祭りナゴヤアニメーションappendChild()2017CS4サムライDesignデッサン造形基礎出身高校AWARDSTEXTURE中村勇吾NightCollegeFLEXofTable佐藤可士和SakaeTOCHTML+CSS基礎ActionScript基礎FINALアートアニメーション武豊町FANTASYVIICOMPLETECHILDRENADVENTHPデザインTAFF'09D3.jstoプレゼン演習スクラップブック西村真里子広告批評WCAN×CSSNiteFLASHContents安藤HelveticaSagmeisterデザインのへそWebDirectionEast'08WebアプリXRAY2008WinterStefanW+KTokyo(+CRUZ)志維堀川友章丹下紘希NamQubibiArtlessNCF2017信州アプリコンテスト[ゼロ]関口浩之フォントおじさんミス・ユニバース・ジャパン岐阜大会PHPデザイナーのためのプログラミング入門久保怜也MAXWWW(Welcomeアプリコンテスト愛知県美術館VideopuppetryASIASIGGRAPH鳥取鳥取砂丘アンドリュー・ワイエスデザイン夏休みの課題ノートPC貸与ECMAScriptActionScriptヱヴァンゲリヲン新劇場版:破食品サンプル旭食品サンプル製作所学科学習お母さんの二度見展西田幸司国家検定ヤノベケンジES2015THEウルトラ展黒い太陽インターネットスキル認定普及協会ライブペイントES6富岡聡カナバングラフィックスグラフィックデザイン今井佳子アイディグラフィックスマイクロソフトガンダム後期Webプログラミング初級講座入賞学生参加Independence電信柱エレミの恋ウサビッチWEBコマ撮りアニメソバットシアターCMS特集World)SyntaxHighlighterCONTESTワークスコーポレーション「ヤノベケンジ-ウルトラ」展山川綾那鈴木雄太デザインコンテスト01セキュリティGENOウィルス株式会社エイチームBlog衣台高校尾鷲高校出張講座Tokyo梅澤朝樹UTZOOMLabuatデコクレ山村浩二ターミナル佐藤洋介CALENDAR学校Proxyカスタマイズセミナーv4.0.1WCAN2017SpringUNIQLO荒俣宏日本ファルコム□□□switchスタジオディテイルズゲーム音楽服部友厚ファルコム音楽フリー宣言Mozoramaグラフィクデザインlist-style-type岡田陽一NTTドコモ東海支社displaylist-itemKDDIHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーNCF2013Dmm.com高橋雅人カレーラーメン麺やOK源賢司UXデザイン美術大学芸術大学AWARDジョルテ最優秀賞parseInt()DesignergoogleparseFloat()備忘録concrete53DCG栗山聡一GWDF81教室FlexboxFlexibleBox卒業研究制作展味仙CGスペシャリストトライデント合同企業説明会松田洋樹10日でおぼえるLinuxサーバー入門教室麺屋ココイチフジ家55ポートフォリオアイデア帳就職東京木下健太郎Three.js田代豊たにぐちまことプレゼン佐藤ねじみんなのICT平野健太郎バイドゥUIWeb制作合宿たこ焼きパーティウェブアクセシビリティモリサワFacebookRhizomatiksinspiredPlatformグロースハックグロースハッカーKaizen嵐が如くアクティビティシナリオさかなや晴れやか第51回技能五輪全国大会Webデザイン演習PARTYPerfumebyそこにいない。展あいちトリエンナーレ201314高校採用担当者の心に響く道家陽介中村健太button要素datalist要素keygen要素HTML八木智章オリエンタル第52回技能五輪全国大会竹中民男ScrollmagicScrollMagic紅茶専門店Liyn-anアイテムカンパニーネイルサロンマウアアクセシビリティからはじめる、WebサイトのUXデザイtype属性optgroup要素Velocity.jsWebアクセシビリティ麺の匠親孝行森田霞マークアップエンジニアアップルップルWF1でBLOG新入生SyntaxCrayon2015年度インターンシップスマートフォンサイトUI図鑑夏麺フェアNCF2014新年のご挨拶名古屋駅麺通り飯田淳介CSS3&jQueryで作る木村哲朗フロントエンドエンジニア授業アイチータ那智の大滝本州最南端串本大門坂熊野三山丸高アロチ本家和歌山中華そば八鬼山熊野古道石原愛実ランチ東京コスモ宇野剛志テーブルマカベン名古屋マークアップ勉強会table丸田屋岩出本店青山敬司山田拓生加藤ひとみ第53回ワクワク建設タウン結団式愛知県選手団建設経営者倶楽部西岡克真熊﨑彩名古屋市営地下鉄柏木祥太スパルタキャンプ青空学区クリスマスAnimationAO特別授業仕事ワイヤーフレーム放課後のプレアデスキルターズフェスティバル2011AO入試SUBARUGAINAXキルト展日本の四季中部国際空港笈瀬本通商店街名古屋市中村区ウェブリテラシー協会Slimbox2forJISXFLAVER3.0FLV8341-3:2010河地芳明愛知県立芸術大学坂本貴史平野秀幸英国王のスピーチUntitled!!!!!!!!トライデントカレッジ津田直明制作実績卒業制作・研究発表会2011IA/UXプラクティス沼田啓助円JOY!map卒業・修了制作展カークスヴィル絵文字ぬいぐるみのラパンKtaistyleCustomSmiliesプログラムクイズLoadUltimate涼麺商店サイト制作GA愛知商業高校中級編名駅経済新聞名チャリプチ・フレーズ三蔵CODE名古屋クリエイターフットサル笈瀬本通ポスターデザイン・コンペディションHighlighterみの治商店Twitter駅麺通り名古屋サイト改善研究会増田悟JSBinJSFiddleGoogleAnalytics横浜デジタルアーツCodePenLazy大西健太田中稚妃呂石井研二カメラワークjsdo.itCODEポスターデザイン・コンペティション小林信次中部国際空港株式会社ブラザー工業株式会社PlunkerCodeply株式会社アクアリングablogcmsDTPの勉強部屋イマジンカップ学位NHNTeamBloosum出席率尾花大輔Bloom*Block専門士合同制作合宿合宿2011年度懇親会ドコモdocomo合同制作StationFuture職業実践専門課程第7回若年者ものづくり競技大会結果長野Illustrator第50回JQueryMuse画像をチェックボタンにする張山大祐SVGFacebookページGAMETOKYO東京ゲームショウ2012SHOWレスポンシブWebデザインうぇ~~~~~~~ぶウェブアートデザイナーベースキャンプ名古屋Web制作のおしごと迎春GATEDRAGONドラゴンゲートゴールデンウィークGoogleロゴライアン・ウッドワードマーサ・グレアム5月11日愛知淑徳大学みつけものMagnum北岡弘至伊達千代JAPANWORLDCUP3恵那市岩村プロジェクションマッピングバルサマン2016プラネタリウムメールマガジンOhanaゲーム大賞アマチュア部門ロゴマークWebディレクター敢闘賞ツインメッセ静岡静岡県東京ゲームショウWebデザイナー鈴木脆弱性なんと読む?原一浩坂本邦夫Webプログラマー神戸神戸国際展示場クイズ

メールフォーム

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

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