• ベストアンサー

【CSS】表に線を入れる

<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#999999"> <TBODY> <TR> <TD bgcolor="#ffffff"></TD> <TD bgcolor="#ffffff"></TD> </TR> <TR> <TD bgcolor="#ffffff"></TD> <TD bgcolor="#ffffff"></TD> </TR> </TBODY> </TABLE> これと同じ事をスタイルシートで表現したいのですが、どのようにしたら良いでしょうか? いろいろと試したのですが、外側だけ線が引かれたり中だけ引かれたりと、うまく出来ません。

  • HTML
  • 回答数4
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • k0021
  • ベストアンサー率26% (32/120)
回答No.4

ボーダー(枠線)によりTABLE指定で無くても指定出来ます エクセル表を作成して名前を付けて保存を選択して ファイルの種類で Webページ(*.htm,*html) を選択して保存場所のホルダーを選択しかつファイル名を付けて保存する 非常に見にくいですがborderの使用方法をチェックすれば参考になると思います

参考URL:
http://www.tohoho-web.com/css/reference.htm#border

その他の回答 (3)

noname#39970
noname#39970
回答No.3

ん?線を消したいのかな? なら 1px を 0 に(単位は無くても可)

noname#39970
noname#39970
回答No.2

table{border-collapse:collapse} th,td{border:solid 1px;background-color:white}

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

同じことをしたいのでしょうか? それとも同じように見えればよろしいのでしょうか? 最近ですとcollapseなどがはやりのように思いますが。 <style type="text/css"> table.table1{ border-collapse:collapse; } table.table1 td{ border:1px solid #999999; } </style> <TABLE class="table1"> <TBODY> <TR> <TD>&nbsp;</TD> <TD>&nbsp;</TD> </TR> <TR> <TD>&nbsp;</TD> <TD>&nbsp;</TD> </TR> </TBODY> </TABLE>

関連するQ&A

  • テーブルの線を立体じゃなく普通の線にしたい

    普通にテーブルで表を作ると線が立体的になってしまいますよね。 これを、特定のテーブルだけを普通の罫線だけで作られたような表にしたいと思っています。 テーブルを立体でなく罫線にするには、 【例1】 <STYLE type="text/css"> <!-- td{border-style:solid; border-width:1pt 1pt 1pt 1pt;border-color: #000000;} --></STYLE> というスタイルシートを<head>内に書く。 【例2】 <table bgcolor="#000000" border="0" cellspacing="0" cellpadding="0"> <tr><td> <table border="0" cellspacing="1" cellpadding="0"> <tr><td bgcolor="#ffffff">セル1</td><td bgcolor="#ffffff">セル2</td></tr> <tr><td bgcolor="#ffffff">セル3</td><td bgcolor="#ffffff">セル4</td></tr> </table> </td></tr> </table> という入れ子状態にする。 概ねこの2種類の方法が一般的だと思います。 が、【例1】の方法は作るテーブル全てがこのスタイルになってしまいます。 【例2】は小さい表にはいいですが、セルが大量にある表に使うのは無駄が多く、タグが複雑になるので修正時も面倒です。 これを、個々のテーブルに対して例1のようなスタイルシートを使用して作れないものでしょうか? <span>を使って出来そうな気がするのですが、いろいろ試すもののどうもうまくいきません。こういう場合の合理的な方法をご存知でしたら教えていただけますか。

    • ベストアンサー
    • HTML
  • このフレームを直してもらいたいのですが

    わかりにくいかとは思いますが、 下のようなフレームを作っています。 ―――――――――――――――――― |           | |           |   ここがない→ |________ |__________ |                          | |                          | |___________________| まず「田」のテーブルを作って、下段を結合して一つにすると、 以上のようになってしまいます。なぜでしょうか? ソースを書いておきますので、直してもらえませんでしょうか。 -------------------------------------------------- <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P> <TABLE cellSpacing=0 cellPadding=0 bgColor=#000000 border=0> <TBODY> <TR> <TD bgColor=#000000> <TABLE cellSpacing=1 cellPadding=7 border=0> <TBODY> <TR> <TD bgColor=#ffffff colSpan=5> <P>aaaaa</P></TD> <TD bgColor=#ffffff>ここが消える→</TD></TR> <TR> <TD bgColor=#ffffff colSpan=6> <P>aaaaa</P></TD></TR></TBODY></TABLE> </TD></TR></TR></TBODY></TABLE></P> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • tableをcssで表記したい

    下記のhtmlのスタイル部分をcssで表記したいのですが、 どのようにすればよいのでしょうか? tableの種類が一つの場合はできるのですが・・・ <table width="100" border="1" cellpadding="1" cellspacing="1" bgcolor="#AAAAAA"> <tr> <td width="30" bgcolor="#FFFFFF">a</td> <td ">b</td> </tr> </table> <br> <table width="50" border="2" cellpadding="2" cellspacing="2" bgcolor="#BBBBBB"> <tr> <td width="25" bgcolor="#CCCCCC">c</td> <td>d</td> </tr> </table>

  • テーブルの上下線を消したい

    タイトル通り、テーブルの上下だけの線を消したいのですが、 どのように書けば消えるのでしょうか? 一応今のものは <TABLE border="0" width="290" bgcolor="#ffffff" cellspacing="1" cellpadding="10" style="border:dotted 1px #000000"> <TBODY> <TR><TD valign="top" align="right" width="290" bgcolor="#ffffff" height="800"> <P> </P><p> </p> <DIV align="right"> ○○○ </DIV> </TD> </TR> </TBODY> </TD> </TR> </TBODY> </TABLE> です。お願いします。

    • ベストアンサー
    • HTML
  • テーブルの作り方をご教示ください

    図のようなテーブルを作りたいのですがどうすればいいのかわかりません。 図はエクセルで書きました。 ----------------------------------------------- <table border=0 cellspacing=0 cellpadding=0> <tr> <td> <table border=0 bgcolor="#000000" cellspacing=1 cellpadding=1 width="230"> <tr bgcolor="#FFFFFF"> <td> 1 </td> </tr> <tr bgcolor="#FFFFFF"> <td> 2 </td> <tr bgcolor="#FFFFFF"> <td> 3 </td> </table> </td> </tr> </table> ----------------------------------------------- まではわかったのですが、 3と4を区切る方法がわかりません。 ご回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブル内のテーブルの高さを揃えたい。

    CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

    • ベストアンサー
    • HTML
  • テーブルサイズ指定

    こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という2つのテーブルで、 2つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • セルを透明に・・・

    以下のような表があります。 <TABLE cellpadding="3" cellspacing="1" bgcolor="#666666"> <TBODY> <TR> <TD bgcolor="#ffffff">項目1</TD> <TD bgcolor="#ffffff">内容1</TD> </TR> <TR> <TD bgcolor="#ffffff">項目2</TD> <TD bgcolor="#ffffff">内容2</TD> </TR> <TR> <TD bgcolor="#ffffff">項目3</TD> <TD bgcolor="#ffffff">内容3</TD> </TR> </TBODY> </TABLE> この状態で、壁紙を設定すると表の中は白でつぶれてしまいますよね。 これを表の中にも背景が出るようにすることは可能ですか? style="filter:alpha(opacity=0)"をいろいろなところに当てはめてみたのですが、うまく出来ませんでした。 何か方法はありますか?よろしくお願いします。

    • ベストアンサー
    • HTML
  • スタイルシートの書き方

    HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな(?)スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか? 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>

    • ベストアンサー
    • CSS
  • colspan セルの結合について

    テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>