Tableタグ内のspan styleが適応されない

2023/10/14 12:22

このQ&Aのポイント

ブログの表でtableタグを使っているが、文字のスタイルが正しく適用されない問題が発生している。
文字の大きさが10ptではなく、およそ15ptになってしまっている。
スタイルシート（HTML）に何かおかしな箇所があるのか疑問に思っている。

ベストアンサー

Tableタグ内のspan styleが適応されない

2007/03/26 16:25

先日ブログを開設して、表を作りたかったのでtableタグを使ったのですが、表中の文字が何故か10ptにならず、およそ15ptくらい大きくなってしまいます。どこかスタイルシート（HTML?)がおかしいのでしょうか？詳しい方、ご教授の程お願いいたします。下記の様に設定しました。 <table border="1" cellpadding="0" cellspacing="0" width="430"><colgroup> <col align="center"><col span="5" align="center"> <span style="font-size:10pt;"><tr><th>・・・・・・</td></tr></span></col></colgroup></table>

jpn121298
お礼率5% (5/86)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

taketan_mydns_jp
ベストアンサー率58% (450/773)

2007/03/26 16:47 回答No.1

spanはインライン要素で使うタグですので、そのような使い方はよろしくないかと。 <td><span ...></span></td>というような感じですね。 <td style="font...."></td>と言う指定も出来ます。まとめて設定したい場合はスタイルシートにするのが楽ですね。 thとtdタグにfont-sizeが有効にしたいとしたら、ヘッダーに <style type="text/css"> td,th { font-size:10px; } </style> とすれば全てのtd,thタグの中の文字が指定無しの場合は10pxとなります。参考まで。

質問者

お礼 2007/03/26 18:39

早速やってたら、無事に出来ました！わざわざ回答ありがとうございました！

関連するQ&A

borderが1のテーブル
ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか？私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
テーブル内のテーブルの高さを揃えたい。
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
テーブルの線を立体じゃなく普通の線にしたい
普通にテーブルで表を作ると線が立体的になってしまいますよね。これを、特定のテーブルだけを普通の罫線だけで作られたような表にしたいと思っています。テーブルを立体でなく罫線にするには、【例1】 <STYLE type="text/css"> </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">セル１</td><td bgcolor="#ffffff">セル２</td></tr> <tr><td bgcolor="#ffffff">セル３</td><td bgcolor="#ffffff">セル４</td></tr> </table> </td></tr> </table> という入れ子状態にする。概ねこの２種類の方法が一般的だと思います。が、【例1】の方法は作るテーブル全てがこのスタイルになってしまいます。【例2】は小さい表にはいいですが、セルが大量にある表に使うのは無駄が多く、タグが複雑になるので修正時も面倒です。これを、個々のテーブルに対して例1のようなスタイルシートを使用して作れないものでしょうか？ <span>を使って出来そうな気がするのですが、いろいろ試すもののどうもうまくいきません。こういう場合の合理的な方法をご存知でしたら教えていただけますか。
- ベストアンサー
- HTML
表の作成
いつもお世話になっています。下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick="">  </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick="">  </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか？よろしくお願いいたします。
- ベストアンサー
- HTML
テーブルのテーブルの間に間ができるのでしょうか？
はじめまして、超html初心者のものです。なぜ同じようテーブルを３つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <html> <head><title>test</title> </head> <form> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">日付け：</th> <td width=284> <input type="text"><input type="button"> </td> <td> - </td> <td><input type="text"><input type="button"></td> </tr> </table> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">部署：</th> <td width=100> <select name="busyo"></select> </td> <th width=80 align="right">営業所：</th> <td width=100> <select name="eigyousyo"></select> </td> <th width= 80 align="right">担当コード:</th> <td width=450> <select name="tantocode"></select> </td> 　 </tr> </table> <table border=1cellspacing=0cellpadding=2width=760> <tr> <th width=80 align="right">権限:</th> <td width=700> <select name="kengen"></select> </td> </tr> </table> </form> </html>
- 締切済み
- HTML
入れ子になっているHTMLタグも抜き出したい
現在、/^(<([\w]+)[^>]*>)(.*?)(<\/\\2>)/という正規表現で再帰的に処理させてHTML部分のみカットしています。が、 <table border="1" cellpadding="2" cellspacing="0" align="right" style="margin-left:1em"><tr><td colspan="2" cellspacing="0" cellpadding="2"><table align="center" border="0"><tr><td colspan="2" align="center">aaa</td></tr></table></td></tr></table> こういった同じタグの入れ子状態になっている事を想定していなかった為正しく抜き出しが行えず問題が発生しています。しかし、現状の処理でずっと動作させてきたので、出来るだけ処理を変更せず上記HTMLにも対応させたいです。何かいい正規表現か、同等の処理はありませんでしょうか？
- 締切済み
- PHP
入れ子にしたテーブルをheight100%にする
お世話になります。以下のソースで、table2の高さを100％にしたいです。この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css">  </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
テーブルの枠の中にテーブルを設置
TOPページに下記のような大きな４等分の枠なしテーブルを作り、中にテーブルを埋め込みたいと思っています。 <TABLE border="0" width="700" height="500"> <TR> <TD>●1</TD> <td>●2</td></TR> <TR> <TD align="left" valign="bottom">◎1</TD> <td align="center" valign="middle"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="8" cellspacing="0" bgcolor="greenyellow"><tr><td align="center"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="4" cellspacing="0" bgcolor="#ccff99"><tr><td align="center"><font color="mediumseagreen">★ ★ ★</font>　おしらせ　<font color="mediumseagreen">★ ★ ★</font></td></tr> <tr><td bgcolor="white"> <textarea cols="28" rows="5"> ここに文字 </textarea> </td></tr></table> <br> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="3" cellspacing="0" bgcolor="white"><tr><td bgcolor="white"> 最終更新 ≫ </td></tr></table> </td></tr></table> </TR> </TABLE> （HEADの間にスタイルシートを挿入します。）このように書くとテーブルを入れた場所の親テーブルが大きく広がってしまいます。広がらずにテーブルを形成する方法をご教授下さい。初心者で申し訳ございません。
- ベストアンサー
- HTML
テーブル高さ指定タグについて
テーブル高さ指定タグについてサイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？
- ベストアンサー
- HTML
tableタグでtdタグ間が離れてしまいます
<div align="center"> <table class="serch" cellpadding="0" cellspacing="0"> <tr> <td><input type="text" name="serch" size="50"></td> <td><input type="image" value="" src="image/serch.gif" ALT="検索" serchim"></td> </tr> </table> </div> .serch{ border-style: solid; border-width: 1px; width: 100%; background-color: #F3F3F3; text-align:center; height: 30px } input textとinput image タグの間が離れてしまいます。通常連続して表示されると思うのですが何故離れてしまうのでしょうか？
- ベストアンサー
- HTML