質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

429閲覧

HTMLのテーブルメインで作りたい

HAll05

総合スコア15

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/19 15:17

イメージ説明
HTMLのテーブルタグをメインに使って作るやり方を教えてください

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/20 01:29 編集

まず自分でできるところまで作ってください。 昨今ではわざわざテーブルメインで作る人はいないので、教える気がある人は期待しないほうが良いです。 自身でやってみて、そこでうまくいかないところを質問したほうが良いでしょう
yoshinavi

2019/08/21 06:44

>HTMLのテーブルタグをメインに使って作るやり方を教えてください → このままでは「丸投げ」となり低評価の対象になります。自分で考えたコードで、不具合個所があれば、それを提示してください。 また、テーブルレイアウトは、多くのHTML属性が非推奨であり、SEO的にもマイナス要素になりますので、表以外でのテーブルレイアウトは、やめた方が良いです。
guest

回答3

0

gridをつかってみたらどうですか?

投稿2019/08/19 16:57

Nippun

総合スコア1147

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

すごい懐かしい(?)ですね。
たぶんこんな感じにして、線を消してだと思いますけど、containerやらwrapperやらで囲むのは無理じゃないですかね。

tableでページ全体をレイアウトするのはHTML4あたりの頃にはすでに非推奨だったはずなので、divやらsectionやらで囲んで、CSSでレイアウトするべきと思います。

html

1<table border=1> 2 <tr class="header"> 3 <td colspan="3"> 4 header 5 </td> 6 </tr> 7 <tr> 8 <td class="sideL">side L</td> 9 <td class="main">main</td> 10 <td class="sideR">side R</td> 11 </tr> 12 <trclass="footer"> 13 <td colspan="3"> 14 footer 15 </td> 16 </tr> 17 18</table> 19

投稿2019/08/20 01:19

FiroProchainezo

総合スコア2392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

例えばこんな感じ
(mainをダイレクトにtableとせず、divに入れるほうが何かと楽)

css

1<style> 2#container{background-Color:yellow;} 3#wrap{display:flex;justify-content: space-between;} 4#wrap>*{ width: 100%;} 5#sideL{background-Color:lime;} 6#main{background-Color:fuchsia} 7#main table{border-collapse:collapse;height:100%;width:100%} 8#main table td{border:solid 1px #000000;text-align:center;} 9#sideR{background-Color:aqua;} 10#footer{background-Color:orange;} 11</style> 12<div id="container"> 13header 14</div> 15<div id="wrap"> 16<div id="sideL"> 17sideL 18<br><br><br><br><br><br> 19<!-- 高さはダミー --> 20</div> 21<div id="main"> 22<table id="main"> 23<tbody> 24<tr><td>main</td></tr> 25</tbody> 26</table> 27</div> 28<div id="sideR"> 29sideR 30<br><br><br><br> 31</div> 32</div> 33<div id="footer"> 34footer 35</div>

投稿2019/08/20 00:55

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問