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を入れられ...
-
テーブルの表示がずれます
-
スタイルシートで colspan=3と...
-
Safariでテーブルのセルの高さ...
-
文字列が入っているtdを削除せ...
-
TRタグの余白をcssで設定するには
-
テーブルタグのセルの幅の一部...
-
中に<table></table>が使えるア...
-
tableの左側の色をCSSで一回で...
-
テーブルのヘッダとボディの幅...
-
テーブルのセルにアンカー
-
テーブルの外側の線を消す
-
チェックボックスが複数チェッ...
-
tdなどの閉じタグは省略しても...
-
<table>の<thead>をposition:fi...
-
HTMLのテーブルで桁をそろ...
-
HTMLのテーブル内容を配列にす...
-
テーブルタグの中に<ol><li>を...
-
javascriptを使って、指定行以...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
ホームページ 表の上の余白を...
-
テーブルのセルにアンカー
-
逆L字の表(table)組み
-
テーブルタグのセルの幅の一部...
-
中に<table></table>が使えるア...
-
tableでcolspanを使うと次行以...
-
スタイルシートで colspan=3と...
-
TABLE内の枠線を一部消すには
-
テーブルの上に空行が入る・・...
おすすめ情報