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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

7906閲覧

html でのテーブルにわざと空のcell を作り、それをスキップするには

TomofumiKimura

総合スコア65

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2017/03/20 08:08

html のテーブルで<td><br></td><td>&nbsp</td><td></td>は使わないで、このhtml が表示するような全く同じテーブルを作らなければいけないのですが、他に空のcell を作り そのcellをスキップするやり方が見つかりません。ネットで検索しましたが、ほとんどが<td><br></td><td>&nbsp</td><td></td>を使い css でempty-cells:hide;などをしています。他に方法はあるのでしょうか?

HTML

1<!DOCTYPE html> 2<html> 3<!-- 4COMP112, Badly formed table exercise 5Nick Meek, December 2014 6--> 7 <head> 8 <title>Badly Formed Table Exercise</title> 9 <meta charset="utf-8"> 10 </head> 11 <body> 12 <table> 13 <tr> 14 <td>Contacts:</td> 15 <td>Aaron</td> 16 <td>021 1234567</td> 17 <td>22 Forth St</td> 18 </tr> 19 <tr> 20 <td> 21 <br><!-- このような方法は使うなと言われました。--> 22 </td> 23 <td>Alice</td> 24 <td>022 123456</td> 25 <td>24 Dundas St</td> 26 </tr> 27 <tr> 28 <td> 29 <br><!-- このような方法は使うなと言われました。--> 30 </td> 31 <td>Amy</td> 32 <td>022 852456</td> 33 <td>241 George Street</td> 34 </tr> 35 </table> 36 </body> 37</html>

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

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

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

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

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

guest

回答2

0

ベストアンサー

こういうこと?

HTML

1 <table> 2 <tr> 3 <td rowspan="3">Contacts:</td> 4 <td>Aaron</td> 5 <td>021 1234567</td> 6 <td>22 Forth St</td> 7 </tr> 8 <tr> 9 <td>Alice</td> 10 <td>022 123456</td> 11 <td>24 Dundas St</td> 12 </tr> 13 <tr> 14 <td>Amy</td> 15 <td>022 852456</td> 16 <td>241 George Street</td> 17 </tr> 18 </table> 19```**動くサンプル:**[https://jsfiddle.net/v0pk0cdL/](https://jsfiddle.net/v0pk0cdL/) 20 21--- 22 23【HTML5/テーブル/td要素 セルを結合する - TAG index】 24[http://www.tagindex.com/html5/table/td_span.html](http://www.tagindex.com/html5/table/td_span.html) 25

投稿2017/03/20 08:13

編集2017/03/20 08:15
kei344

総合スコア69364

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

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

TomofumiKimura

2017/03/20 08:19

一番最初のテーブルと全く同じではいけないので違いますね。すみません。
kei344

2017/03/20 08:20

「一番最初のテーブル」って?
TomofumiKimura

2017/03/20 08:23

自分が上に書いたコードをブラウザで見てもらえるとわかると思います。そのテーブルが最初のやつです。
TomofumiKimura

2017/03/20 21:42

あ、すみません、動くサンプルのコードを見ていませんでした。ありがとうございました。
guest

0

CSS でvertical-align:top; を使ったらできました。ありがとうございました。

CSS

1#contacts{ 2 vertical-align:top; 3 4}

HTML

1<td rowspan="3" id = "contacts">Contacts:</td> 2 3

投稿2017/03/20 08:39

TomofumiKimura

総合スコア65

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

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

Zuishin

2017/03/20 08:40

kei344 さんに教えてもらったものと同じです。 そういう時には自己解決ではなく回答者にベストアンサーをつけてください。
TomofumiKimura

2017/03/20 21:42 編集

あ、kei344 さんの動くサンプルを見ていませんでした。すみませんでした。
Zuishin

2017/03/20 21:55

仮に見ていなかったとしても、rowspan は教えてもらったでしょ?
Zuishin

2017/03/20 22:00

そもそも二回も URL 貼ってもらってなぜ見ないのか意味がわかりませんし。
TomofumiKimura

2017/03/20 22:04

rowspan は知っていました。まだこのサイトを使い慣れてないので動くサンプルというのを知りませんでした。次回からは気をつけます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問