ウェブ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
検索フォーム
プロフィール

担当: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回技能五輪
<若年者ものづくり競技大会>
第14回若年者ものづくり競技大会
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種若年者ものづくり競技大会ウェブデザインWebサイト2013映画名古屋ECCコンピュータ専門学校ポートフォリオ学生ブログWebデザイン2009WinterWebサイト制作20111年生進級展JavaScript技能五輪全国大会WordPressアクアリングかっぱ商店街オープンキャンパス入学式礒田優Wordpressライトニングトークa-blogcms2014NagoyaWeb矢野りん卒業制作展卒展合同企業展石黒雄介アクセス解析CSSWeb制作会社若年者ものづくり大会瀬川大勝面白法人カヤックAutumn体験入学SummerCGイラスト学科卒業制作テンプレート作成ホームページ・ビルダー閉館日2010inhtml5あいちカレーラーメンコンテスト杉本拓也佐藤歩学生インタビューHTML5HCDウェブデザイン技能競技会大阪FlashIIJ2015miniウェブデザイン技能競技大会GIOJapan名古屋駅Adobe東京研修ココストア第48回技能五輪全国大会2012マール情報デザインCSS3フォトアルバムjQuery企業訪問プレゼンテーションCentOS水野裕太gifアニメ人間中心設計display:grid成田篤紀制作合宿2018Webデザインギャラリープロジェクト学生セントレア林田実樹ウェブデザイン技能検定情報デザインフォーラムサイバーエージェントラーメン夏季閉館日BananaAdWebクリエイター能力認定試験GridLayoutグリッドレイアウトブログパーツ愛知県NEXT夏休みトライデント祭り北濱大輔99eagleGoogleWebワークショップ田中睦翔上村水月専門学校COMMUNICATIONSpringスマホアプリNTTドコモ東海ワークショップparticle1年生作品展うぇーぶモンキーワークスcanvasまぼろしPluginビジュアルエディタ謹賀新年名古屋市科学館iPhone就職活動初期設定卒業式サーティファイ空気人形会社訪問熊谷佳紀コミュニケーションデザインワークショップフロントエンドエンジニアアップルップルメ~テレ堀尾真衣ポートフォリオサイト飯田淳介幕張メッセ阿部淳也結果発表Yahoo!Japan静岡option要素Analyticsナゴヤドーム知多みるく戸田芳裕SEO中日ドラゴンズ名商連LikeWEBサイト制作者のためのHCDの理解in名古屋BoxCSSNiteレイアウト5T(ファイヴティー)ウェブアクセシビリティ作品集WordFesAdventCalendarスマートフォンAWARD和みモリサワUXForumoutput要素textarea要素input要素愛知県選手団select要素アンティー・ファクトリーカメラ産学協同FICC写真legend要素fieldset要素イラストマップトライデント塚本碧岩手県笈瀬本通りトライデント合同企業展label要素form要素たこ焼き真鍋大度長屋めぐみマークアップエンジニアWebデザイナー株式会社LIG水野怜美アプリコンテストjbstyle導入授業情報デザイン基礎企業課題ドラマ信州アプリコンテスト[ゼロ]鷹野雅弘鈴木優太学習進級展F-site豊田市美術館Runstant茂森仙直StoreWebリテラシーCMSApple久保怜也出張講座DTPWORLD名古屋開府400年祭2008Markup沖縄2017カリキュラムグループ制作アサココ!ディプロスWordCamp笈瀬本通中村勇吾名古屋グランパスCS4TEXTURE佐藤可士和サムライ三蔵みの治商店ポスターデザイン・コンペディショングラフィクデザインチタハン10FLEXCollegeFLASHTwitterCODENightSakae名古屋クリエイターフットサルペルソナIAYORKE.ビジュアルデベロップメントサーバーアクセシビリティ金シャチ商店街名古屋メディアボンド伊藤頼子西村真里子技能五輪予選TAFF'09WEBサイト制作者のためのHCDの理解広告批評プロトコル分析WCAN×CSSNiteプレゼン演習ActionScript基礎広島弁iPhone4シナリオ柴乃櫂人ITCIRCUSAndrioidDesignプチ・フレーズ1→10design商店街HTML+CSS基礎タロヲ造形基礎細川太郎デッサンWEBサイト制作者のためのHCD(人間中心設計)の理解デザイナーのためのプログラミング入門FLV8341-3:2010XFLAVER3.0名古屋市中村区キルターズフェスティバル2011デザインコンテスト笈瀬本通商店街HPデザインJISArtlessQubibiLoadNamforウェブリテラシー協会Slimbox2丹下紘希放課後のプレアデスSUBARU絵文字WEBTHECustomSmiliesKtaistyleぬいぐるみのラパンカンファレンスウェブデザイン部門CONTEST円JOY!map日本の四季中部国際空港GAINAXキルト展01卒業・修了制作展愛知県立芸術大学Lazy大西健太増田悟アンドリュー・ワイエス愛知県美術館小林信次CODEポスターデザイン・コンペティション鳥取砂丘中部国際空港株式会社デザイン名古屋サイト改善研究会中級編GAUltimateMAX武豊町PHP名駅経済新聞名チャリ愛知商業高校ブラザー工業株式会社鳥取HelveticaGoogleAnalyticsデザインのへそSagmeister横浜デジタルアーツ田中稚妃呂W+KTokyo(+CRUZ)StefanWebDirectionEast'08石井研二株式会社アクアリングASIAVideopuppetrySIGGRAPHXRAY2008Winterカメラワーク商店サイト制作CHILDRENFITCカナバングラフィックスウサビッチ富岡聡学科教育勉強会旭食品サンプル製作所ロゴ公募CREAM電信柱エレミの恋閉会式コマ撮りアニメゆるキャラ映画のオープニングマクロマリオネットごはんとFlashマークアップ演習#infoedu小野裕子デュエル・マスターズライブペイントインターネットスキル認定普及協会黒い太陽イラストコンテストウェブDeBLOGヨウイチ国家検定長谷川恭久山崎デザイン事務所食品サンプルコピーライティングActionScriptヱヴァンゲリヲン新劇場版:破スーパーエレメンツ西田幸司ソバットシアターFlash-Games後期Mozoramaアニメーション人喰いの大鷲トリコ東京ゲームショウ2009ITホワイトボックスPHP勉強会大富豪スコアシートescalator是枝裕和監督第4回アックゼロヨン・アワードUNIQLOCKギレン総帥CG・イラストコンテストモーション演習animationナゴヤデザインウィーク2009世界のCMフェスティバルYahoo!学生参加アイディグラフィックス今井佳子dotFesCMS特集wonderflKyotoHCDプロセスブランディングストリートビュー入賞JAPANインターネットクリエイティブアワードカラーガンダムグラフィックデザインAutumin情報デザイン教育勉強会ペルソナ/シナリオ法ワークスコーポレーションナゴヤ武将都市「ヤノベケンジ-ウルトラ」展BlogLabuat道頓堀UTZOOM名古屋おもてなし武将隊武豊アニメーションフェスティバル福みつ餃子浜松セキュリティGENOウィルスTAFFWCAN46新世界求人知多半島FANTASYVIIFINALスタジオジブリ・レイアウト展アートアニメーション松坂屋美術館ADVENTLPOTokyoネスカフェゴールドブレンド大沢たかおフナ犬ポートピア名古屋COMPLETEプロ野球デコクレIA2010キックオフセミナー3校合同発表会ファルコム音楽フリー宣言クリ博就職フェスタ横浜デジタルアーツ専門学校日本電子専門学校会社見学鎌倉荒俣宏ペルソナ&シナリオ法カスタマイズセミナーヤノベケンジウルトラ展おかだよういち浅野智UNIQLOCALENDAR森川眞行音楽WasThere□□□switchSalsa山村浩二夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーThenAnd横浜中華街箱根合宿ゲーム新横浜ラーメン博物館慶華飯店NIKE日本ファルコムunoplusTeamタカガールサイト日清食品グループ水曜日のカンパネラプラネタリアンResurgenceジムナストコロン学生作品集再進学学園祭情報系MonacaDay:IndependenceJSFiddleJSBinCodePenプログラムクイズPlunkerCodeplyクイズ駅麺通り涼麺jsdo.it驛麺通りいな世ES2015ES6ECMAScriptお母さんの二度見展SyntaxHighlighterv4.0.1ターミナル学校ProxyWCAN2017SpringマイクロソフトWebプログラミング初級講座Instagramインスタグラム醐りょう料理芸大appendChild()HTMLCollectionNodeList美大AO入試河地芳明高校採用担当者の心に響く14グロースハッカーグロースハックポートフォリオアイデア帳平野健太郎ワイヤーフレーム仕事UIバイドゥPlatformKaizenFlexbox味仙CGスペシャリスト松田洋樹FlexibleBox岡田陽一アクティビティシナリオ源賢司UXデザインDmm.comうぇ~~~~~~~ぶウェブアートデザイナー津田直明2016原一浩坂本邦夫制作実績坂本貴史沼田啓助カークスヴィルIA/UXプラクティス平野秀幸WebプログラマーWebディレクター学位出席率職業実践専門課程レスポンシブWebデザイン専門士合同制作合宿Web制作のおしごと懇親会合宿合同制作佐藤洋介服部友厚あけおめ株式会社サイバーエージェント平成31年メーカー・ブランドコーヒー用品桝田草一牧野史門線の群生FigmaツールUIデザイン前川元成NextDoorsourcepicture沖縄県第56回srcset第56回技能五輪全国大会斉藤洸貴cymaEC事業エイチーム2020新卒日本総合ビジネス専門学校髙橋株式会社スタメン松本渚株式会社アンティー・ファクトリー茜音2019仙直茂森コンテストソレコン☆ポスコンPhotoshopCS6祐司わたし、定時に帰ります。新入生オリエンテーション企業見学株式会社MTGTBSCBC髙橋茜音STUDIOLIGGOOculusofContentsTableTOCAWARDS安藤志維堀川友章NCF2017ミス・ユニバース・ジャパン岐阜大会フォントおじさん関口浩之出身高校D3.js株式会社エイチーム山川綾那鈴木雄太スタジオディテイルズ梅澤朝樹衣台高校スクラップブック夏休みの課題ノートPC貸与尾鷲高校Webアプリ安藤イークリエイト藤井英一JIHYEHEO冨田伴成新城高校VRカルタ東京ゲームショウ2018出前授業青山高校ホ・ジヘ韓国WWW(Welcome友章堀川志維toWorld)脆弱性なんと読む?期末テストWebデザインスペシャルデー北川パーヤン3DCG東京コスモMuseWeb制作合宿画像をチェックボタンにする張山大祐JQueryたこ焼きパーティFacebook就職東京佐藤ねじみんなのICT第50回結果GAMETOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会SHOWベースキャンプ名古屋長野IllustratorSVGFacebookページ木下健太郎Three.jsフジ家55さかなや晴れやか嵐が如く麺屋ココイチ麺やOK美術大学芸術大学高橋雅人カレーラーメン第51回技能五輪全国大会Webデザイン演習Rhizomatiks田代豊たにぐちまことプレゼンinspiredbyあいちトリエンナーレ2013そこにいない。展PARTYPerfume尾花大輔Bloom*Block愛知淑徳大学ドラゴンゲートみつけもの恵那市岩村プロジェクションマッピングDRAGONGATEマーサ・グレアム5月11日Googleロゴゴールデンウィークバルサマン3トライデントカレッジUntitled!!!!!!!!英国王のスピーチablogcmsDTPの勉強部屋JAPANWORLDCUPMagnum北岡弘至伊達千代ライアン・ウッドワードプラネタリウムdocomoドコモ2011年度迎春FutureStationBloosum冬休みイマジンカップNHN敢闘賞ツインメッセ静岡神戸神戸国際展示場鈴木東京ゲームショウゲーム大賞アマチュア部門静岡県ロゴマークメールマガジンOhanaNCF2013NTTドコモ東海支社HTML第52回技能五輪全国大会button要素datalist要素keygen要素オリエンタル麺の匠名古屋駅麺通りNCF2014新年のご挨拶親孝行optgroup要素type属性青山敬司山田拓生加藤ひとみ西岡克真結団式アイチータ紅茶専門店Liyn-anアイテムカンパニーネイルサロンマウア授業CSS3&jQueryで作るスマートフォンサイトUI図鑑WebアクセシビリティVelocity.jsScrollMagicScrollmagicアクセシビリティからはじめる、WebサイトのUXデザイ建設経営者倶楽部クリスマス熊﨑彩第53回ワクワク建設タウン八木智章竹中民男2015年度新入生WF1でBLOGインターンシップCrayonSyntax夏麺フェア木村哲朗森田霞HighlighterAnimationAOparseInt()DesignergoogleGWDparseFloat()備忘録中村健太道家陽介concrete5栗山聡一F81教室トライデント合同企業説明会モテ声ボーダーlist-itemdisplaylist-style-typeHTML5スマートアプリ&クリエイティブコンテストKDDI10日でおぼえるLinuxサーバー入門教室卒業研究制作展最優秀賞ジョルテランチ石原愛実丸田屋丸高アロチ本家和歌山中華そば岩出本店スパルタキャンプ特別授業青空学区名古屋市営地下鉄柏木祥太熊野三山大門坂名古屋マークアップ勉強会tableテーブル宇野剛志マカベン熊野古道那智の大滝本州最南端串本八鬼山卒業制作・研究発表会2011

メールフォーム

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

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