Dreamweaver MX2004 (MacOS X)でHPを制作しているのですが、レイアウトセルに沿って罫線がうまくひけません。
このサイトでも普通に罫線が使われていますが、どうやればきれいに作れますか。
レイアウトテーブルにDivタグの背景イメージとして罫線を貼り付けましたが、Safariだと文字と罫線がくずれます。(Internet Explorerは大丈夫でした)
また、タグのボーダーを使っても、セルに隣接する部分の線がきれいつながらないのです。
良い方法がありましたら、アドバイス願います。
No.1ベストアンサー
- 回答日時:
表組みのような罫線、というのは
例えば下記のような感じでしょうか?
もしそうでしたら、
隣接するセルのボーダーを重ねて表示させるような
スタイルシートを使うと作れます。
<html>
<head>
<title>表</title>
<style type="text/css">
<!--
.td {border: solid 1px #000000; border-collapse: collapse;}
.td1 {border: solid 1px #000000; border-collapse: collapse;}
.td2 {border-top:none;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:none;}
-->
</style>
</head>
<body>
<table width=100% style='border-collapse:collapse;'>
<tr>
<td colspan="2" class="td2"></td>
<td width="20%" class="td">あいうえお</td>
<td width="20%" class="td">かきくけこ</td>
<td width="20%" class="td">さしすせそ</td>
<td width="20%" class="td">たちつてと</td>
</tr>
<tr>
<td width="5%" align="center" valign="middle" class="td">ⅰ</td>
<td class="td" width="15%">ABC</td>
<td width="20%" align="center" class="td">ア</td>
<td width="20%" align="center" class="td">イ</td>
<td width="20%" align="center" class="td">ウ</td>
<td width="20%" align="center" class="td">エ</td>
</tr>
<tr>
<td width="5%" align="center" valign="middle" class="td">ⅱ</td>
<td class="td" width="15%">ABC</td>
<td width="20%" align="center" class="td">ア</td>
<td width="20%" align="center" class="td">イ</td>
<td width="20%" align="center" class="td">ウ</td>
<td width="20%" align="center" class="td">エ</td>
</tr>
<tr>
<td width="5%" align="center" valign="middle" class="td">ⅲ</td>
<td class="td" width="15%">ABC</td>
<td width="20%" align="center" class="td">
ア</td>
<td width="20%" align="center" class="td">イ</td>
<td width="20%" align="center" class="td">ウ</td>
<td width="20%" align="center" class="td">エ</td>
</tr>
</table>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 エクセルの罫線がパワポに貼り付けると見えなくなる。 3 2022/12/27 15:23
- Word(ワード) ワードでの罫線の改行につい 4 2022/10/24 11:05
- Excel(エクセル) vba セルの罫線について教えてください 2 2022/12/28 17:14
- Word(ワード) Word 段落罫線の上下のスペースを広げるには 3 2023/08/04 10:52
- Excel(エクセル) 罫線の横棒の隣に文字を書きたい 5 2022/11/28 17:31
- CAD・DTP EXCELからAUTOCADに貼り付け 1 2022/04/20 17:42
- Word(ワード) Wordで作った「表の罫線を部分的に削除したい」 4 2023/07/24 07:00
- マナー・文例 手紙の便箋に書く文字が大きくないか見て欲しいです。 5 2022/04/22 14:54
- JavaScript 階層別の組織図の自動作成について 1 2022/10/26 13:42
- その他(IT・Webサービス) word2013 で罫線 便箋のように罫線を沢山書きたいのですが、調べても、1本しか引けません。 い 3 2022/06/26 19:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
文字列が入っているtdを削除せ...
-
TRタグの余白をcssで設定するには
-
テーブルの行を折りたたみたい...
-
テーブルの表示がずれます
-
ホームページ 表の上の余白を...
-
HTML <td></td>タグ セル内余...
-
中に<table></table>が使えるア...
-
改行幅の指定
-
テーブルの上に空行が入る・・...
-
HTMLのテーブルで桁をそろ...
-
cssで、表示されるテキストによ...
-
tableコーディング 幅ピッタリ...
-
テーブルの行の高さを指定する...
-
ASP GridViewで1レコード2行を...
-
Safariでテーブルのセルの高さ...
-
テーブルのセルにアンカー
-
テーブルのヘッダとボディの幅...
-
tableの要素(tr、td)に一...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行を折りたたみたい...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
テーブルタグのセルの幅の一部...
-
中に<table></table>が使えるア...
-
逆L字の表(table)組み
-
ホームページ 表の上の余白を...
-
表の中の列の順番を入れ替える...
-
EXCELからhtmlへの変換で罫線が...
-
tableでcolspanを使うと次行以...
-
表の1列だけをCSSを使って右揃...
-
文字の中央そろえを一括で指定...
おすすめ情報