ウェブ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年生進級展「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コンピュータ専門学校学生ブログ2009WinterWebサイト制作WebデザインJavaScript技能五輪全国大会2011WordPressかっぱ商店街礒田優Wordpress2014入学式Nagoya矢野りんライトニングトーク卒業制作展a-blog1年生進級展アクアリングオープンキャンパスcmsWeb瀬川大勝ホームページ・ビルダーテンプレート作成CGイラスト学科若年者ものづくり大会アクセス解析AutumnSummer石黒雄介CSS面白法人カヤック大阪合同企業展体験入学minihtml5ウェブデザイン技能競技会HTML5in杉本拓也GIOIIJ卒展Flash2015卒業制作HCDあいちカレーラーメンコンテストAdobe名古屋駅第48回技能五輪全国大会Web制作会社20102012東京研修Japanココストアマールウェブデザイン技能検定CentOS北濱大輔サイバーエージェント学生インタビュー情報デザインブログパーツ佐藤歩愛知県gifアニメ成田篤紀Webデザインギャラリーdisplay:gridGridLayoutCSS3jQueryWebワークショッププレゼンテーションGoogleCOMMUNICATIONプロジェクト田中睦翔グリッドレイアウトセントレア水野裕太専門学校閉館日企業訪問学生2018上村水月ウェブデザイン技能競技大会99eagleBananaAdSpring情報デザインフォーラム人間中心設計ラーメンNEXTcanvasparticle幕張メッセビジュアルエディタPlugin就職活動textarea要素Analyticsoption要素select要素CMS林田実樹output要素長屋めぐみ会社訪問堀尾真衣スマホアプリ1年生作品展卒業式うぇーぶマークアップエンジニアメ~テレカリキュラムまぼろしYahoo!JapanSEO空気人形NTTドコモ東海産学協同カメラ5T(ファイヴティー)FICC名商連アンティー・ファクトリーAdventCalendarトライデントAWARD和み熊谷佳紀真鍋大度WEBサイト制作者のためのHCDの理解in名古屋戸田芳裕岩手県Likeレイアウト作品集知多みるく塚本碧WordFes中日ドラゴンズナゴヤドームイラストマップスマートフォンform要素コミュニケーションデザインワークショップたこ焼きモンキーワークス名古屋市科学館label要素結果発表愛知県選手団legend要素fieldset要素ワークショップBoxCSSNite静岡トライデント合同企業展笈瀬本通りUXForum写真阿部淳也ポートフォリオサイトinput要素iPhone企業課題アサココ!jbstyleWordCampStoreWebクリエイター能力認定試験サーティファイ初期設定夏季閉館日夏休み鈴木優太制作合宿導入授業Apple出張講座久保怜也F-site2017グループ制作豊田市美術館フォトアルバムMarkupRunstantWebデザイナー名古屋開府400年祭茂森仙直ディプロス2008鷹野雅弘進級展DTPWORLDWebリテラシー情報デザイン基礎学習沖縄謹賀新年株式会社LIG水野怜美トライデント祭りデザイナーのためのプログラミング入門名古屋メディアボンド金シャチ商店街アクセシビリティサーバー道頓堀IAYORKE.MAX細川太郎シナリオペルソナiPhone4広島弁柴乃櫂人1→10designPHPタロヲ造形基礎HTML+CSS基礎新世界商店街求人プロ野球unoplus佐藤可士和ポートピア名古屋フナ犬松坂屋美術館スタジオジブリ・レイアウト展TEXTUREサムライ知多半島CS4中村勇吾DesignデッサンWEBサイト制作者のためのHCDの理解技能五輪予選FLASHプロトコル分析伊藤頼子FLEXCollegeSakaeネスカフェゴールドブレンド大沢たかおNightビジュアルデベロップメントチタハン10丹下紘希Nam石井研二GoogleAnalyticsHPデザイン01横浜デジタルアーツデザインコンテストカメラワークArtlessCODEポスターデザイン・コンペティション小林信次増田悟Qubibi中部国際空港株式会社株式会社アクアリングブラザー工業株式会社CONTEST田中稚妃呂8341-3:2010XJISFLVFLAVER3.0カンファレンス名古屋市中村区ウェブリテラシー協会ウェブデザイン部門LoadLazy大西健太THEWEBSlimbox2for名古屋サイト改善研究会W+KTokyo(+CRUZ)ASIA笈瀬本通Videopuppetry名古屋クリエイターフットサルCODESIGGRAPHグラフィクデザインポスターデザイン・コンペディション名古屋グランパス鳥取AndrioidITCIRCUSアンドリュー・ワイエスWEBサイト制作者のためのHCD(人間中心設計)の理解デザイン鳥取砂丘ナゴヤXRAY2008WinterGAUltimateStefan愛知商業高校名チャリ中級編名駅経済新聞Sagmeister商店サイト制作WebDirectionEast'08みの治商店Twitter三蔵プチ・フレーズHelveticaデザインのへそ愛知県美術館広告批評ヤノベケンジウルトラ展カラーカスタマイズセミナーAutuminブランディング笈瀬本通商店街ストリートビュー黒い太陽ITホワイトボックスインターネットスキル認定普及協会PHP勉強会ライブペイント世界のCMフェスティバルJAPANインターネットクリエイティブアワードYahoo!CALENDARHCDプロセス□□□switch日本ファルコムゲーム山村浩二閉会式マクロマリオネット映画のオープニング音楽ファルコム音楽フリー宣言dotFes荒俣宏UNIQLOKyotowonderflゆるキャラFlash-Games大富豪スコアシート東京ゲームショウ2009カナバングラフィックス後期ウサビッチMozoramaアニメーションanimationescalator入賞ガンダムソバットシアターCMS特集アイディグラフィックス今井佳子グラフィックデザイン電信柱エレミの恋コマ撮りアニメ富岡聡モーション演習是枝裕和監督ActionScriptナゴヤデザインウィーク2009人喰いの大鷲トリコヱヴァンゲリヲン新劇場版:破国家検定西田幸司UNIQLOCK食品サンプル第4回アックゼロヨン・アワードCG・イラストコンテスト学科LPOギレン総帥旭食品サンプル製作所マークアップ演習デコクレウェブリテラシー協会第一回セミナーCOMPLETESalsa夢プロジェクト2009・成果報告会IA2010キックオフセミナーADVENTCHILDRENWasThere慶華飯店新横浜ラーメン博物館横浜中華街NIKEAndTokyoThenVII浜松武豊アニメーションフェスティバルTAFFWCAN×CSSNite名古屋おもてなし武将隊西村真里子ActionScript基礎プレゼン演習WCAN46学生参加FINALFANTASY餃子アートアニメーション福みつTAFF'09武豊町箱根合宿森川眞行スーパーエレメンツGENOウィルス山崎デザイン事務所長谷川恭久デュエル・マスターズヨウイチイラストコンテストセキュリティコピーライティングFITCCREAMごはんとFlashロゴ公募教育勉強会小野裕子#infoeduウェブDeBLOG情報デザイン教育勉強会横浜デジタルアーツ専門学校3校合同発表会UTZOOM日本電子専門学校鎌倉会社見学LabuatBlogクリ博就職フェスタおかだよういちペルソナ/シナリオ法ワークスコーポレーション「ヤノベケンジ-ウルトラ」展ペルソナ&シナリオ法浅野智武将都市メールマガジン合宿合同制作合同制作合宿専門士懇親会Web制作のおしごと原一浩坂本邦夫WebプログラマーWebディレクター学位出席率UIバイドゥ平野健太郎ポートフォリオアイデア帳仕事ワイヤーフレーム職業実践専門課程レスポンシブWebデザインウェブアートデザイナーうぇ~~~~~~~ぶ2016津田直明jsdo.itCodeplyPlunkerJSFiddle涼麺駅麺通りResurgenceDay:IndependenceクイズJSBinCodePenIA/UXプラクティス平野秀幸坂本貴史制作実績カークスヴィル沼田啓助プログラムクイズAO入試河地芳明採用担当者の心に響く高校夏麺フェア飯田淳介フロントエンドエンジニア木村哲朗竹中民男八木智章WebアクセシビリティVelocity.jsScrollMagicScrollmagicアップルップル森田霞WF1でBLOGインターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る新入生2015年度HighlighterSyntaxCrayonアクセシビリティからはじめる、WebサイトのUXデザイ建設経営者倶楽部源賢司UXデザインDmm.com岡田陽一アクティビティシナリオKaizen14グロースハッカーグロースハックPlatformFlexibleBoxFlexboxクリスマス熊﨑彩第53回ワクワク建設タウン東京コスモ3DCG味仙CGスペシャリスト松田洋樹プラネタリアン水曜日のカンパネラ安藤WebアプリNCF2017信州アプリコンテスト[ゼロ]志維堀川World)toWWW(Welcome友章アプリコンテストミス・ユニバース・ジャパン岐阜大会TableTOCAWARDS出身高校ofContentsフォントおじさん関口浩之堀川友章安藤志維北川パーヤンWebデザインスペシャルデーOculusVRカルタ東京ゲームショウ2018出前授業GO第56回srcsetsourcepicture沖縄県青山高校新城高校ホ・ジヘ韓国脆弱性なんと読む?期末テストHEOJIHYE冨田伴成イークリエイト藤井英一D3.jsスクラップブックドラマInstagramインスタグラム醐りょう料理芸大appendChild()HTMLCollectionNodeList美大いな世学生作品集ジムナストコロン日清食品グループタカガールサイトMonaca情報系驛麺通り再進学学園祭Webプログラミング初級講座マイクロソフト山川綾那鈴木雄太スタジオディテイルズ服部友厚株式会社エイチーム梅澤朝樹夏休みの課題ノートPC貸与尾鷲高校衣台高校佐藤洋介ターミナルES2015ES6ECMAScriptお母さんの二度見展SyntaxHighlighterv4.0.1学校ProxyWCAN2017Spring名古屋駅麺通りNCF2014Bloom*BlockBloosumTeamイマジンカップ尾花大輔第7回若年者ものづくり競技大会SHOWGAMETOKYO東京ゲームショウ2012NHNStationツインメッセ静岡静岡県ロゴマーク第56回技能五輪全国大会敢闘賞迎春Futuredocomoドコモ2011年度ベースキャンプ名古屋FacebookページみんなのICTウェブアクセシビリティモリサワFacebook佐藤ねじ東京プレゼンThree.js木下健太郎就職たこ焼きパーティWeb制作合宿結果長野IllustratorSVG第50回JQueryMuse画像をチェックボタンにする張山大祐Ohanaゲーム大賞アマチュア部門英国王のスピーチ卒業制作・研究発表会2011ぬいぐるみのラパンKtaistyleUntitled!!!!!!!!トライデントカレッジ伊達千代DTPの勉強部屋ablogcmsCustomSmilies絵文字中部国際空港GAINAXSUBARU放課後のプレアデス日本の四季キルト展円JOY!map卒業・修了制作展愛知県立芸術大学北岡弘至Magnumライアン・ウッドワードマーサ・グレアム5月11日Googleロゴプラネタリウム鈴木東京ゲームショウ神戸神戸国際展示場ゴールデンウィークGATEプロジェクションマッピングバルサマン3JAPANWORLDCUP恵那市岩村みつけものDRAGONドラゴンゲート愛知淑徳大学たにぐちまこと田代豊丸田屋丸高アロチ本家和歌山中華そば岩出本店スパルタキャンプ特別授業青空学区名古屋市営地下鉄柏木祥太熊野三山大門坂マカベン名古屋マークアップ勉強会tableテーブル熊野古道八鬼山那智の大滝本州最南端串本AOAnimationbutton要素datalist要素keygen要素optgroup要素HTML第52回技能五輪全国大会新年のご挨拶親孝行麺の匠オリエンタルtype属性紅茶専門店Liyn-an青山敬司山田拓生加藤ひとみ西岡克真結団式アイチータアイテムカンパニーネイルサロンマウア授業宇野剛志石原愛実麺やOK麺屋ココイチフジ家55さかなやカレーラーメン高橋雅人NTTドコモ東海支社NCF2013美術大学芸術大学晴れやか嵐が如くPerfumebyinspiredRhizomatiksPARTYそこにいない。展第51回技能五輪全国大会Webデザイン演習あいちトリエンナーレ2013list-style-typedisplayparseFloat()parseInt()Designergoogle備忘録栗山聡一ランチ中村健太道家陽介concrete5GWDF81教室KDDIHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーlist-itemジョルテ最優秀賞トライデント合同企業説明会10日でおぼえるLinuxサーバー入門教室卒業研究制作展キルターズフェスティバル2011

メールフォーム

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

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