テーブルのセルの文字のセンターについて

2023/10/13 08:31

このQ&Aのポイント

セル内の文字を中央に配置する方法について教えてください。
テーブルのセル内の文字を正確に中央に配置する方法が分かりません。
セルを１つにすると文字が左側に寄ってしまい、align=middleを使用しても少し右に移動するだけです。どうすれば文字を中央に配置できますか？

ベストアンサー

テーブルのセルの文字のセンターについて

2005/05/04 11:39

セル内の文字のセンターをトライしていますが、出来ていたものがダメです。 <tr> <td colspan="2" width="100" height="30" align=center><a href="flight.html">ああああ</a></td> </tr> ２つのセルを１つにする前は <tr> <td width="100" height="30" ><a href="flight.html"><center>ああああ"></center></a></td> </tr> で、あああは中央にできたのですが、セルを１つにしたら左側に、align=middleを使用すると少し右に移動するだけです。どのようにしたらいいのか教えて下さい。

kennicky
お礼率74% (44/59)

レンタルサーバ・ASP
回答数2
ありがとう数2

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

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

ベストアンサー

shinkun0114
ベストアンサー率44% (1553/3474)

2005/05/04 12:07 回答No.2

<td colspan="2" width="100" height="30"> widthが問題っぽいですね。ここのwidthを外して、tableタグに指定するとかでどうでしょう？ <table width=100> <tr> <td colspan="2" height="30" align=center><a href="flight.html">ああああ</a></td> </tr> <tr> <td><a href="flight.html"><center>あああ</center></a></td> <td>おおお</td> </tr>

質問者

お礼 2005/05/04 12:36

shinkun0114さんできましたよ。還暦まじかの脳細胞には？？？？の連続ですし大変ですが、なんとなくＨＰの目途がついてきました。有難うございます

その他の回答 (1)

cyokokichi
ベストアンサー率21% (32/152)

2005/05/04 12:00 回答No.1

質問者

お礼 2005/05/04 12:21

cyokokichiさん最初にトライしましたがダメでした。有難うございます。

関連するQ&A

CSS　セルごとリンクにする際、リンク文字を上下中央寄せにしたい
セルごとリンクにしたくて、以下の記述をしました。【CSS】 ------------------------------------------------------------------ a.widelink{ vertical-align:middle; display:block; // display:inline-block; width: 100%; height:100%; // line-height:100%; color: #000000; text-decoration:none } a.widelink:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; text-decoration:none } td.bgchng{ align: center; vertical-align: middle; color: #000000; margin: 0px; padding: 0px; } td.bgchng:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; margin: 0px; padding: 0px; } ------------------------------------------------------------------ 【HTML】 ------------------------------------------------------------------ <TABLE border="1" bordercolor="#6666CC" cellspacing="0"> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test01.html" CLASS="widelink"> テスト<BR>（その１） </A> </TD> <TD width="450" bgcolor="">  テスト（その１）の説明文<BR>  二行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test02.html" CLASS="widelink"> テスト（その２） </A> </TD> <TD width="450" bgcolor="">  テスト（その２）の説明文<BR>  二行目<BR>  三行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test03.html" CLASS="widelink"> テスト（その３） </A> </TD> <TD width="450" bgcolor="">  テスト（その３）の説明文<BR>  二行目 </TD> </TR> </TABLE> ------------------------------------------------------------------ この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。 line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。
- 締切済み
- HTML
テーブルの縦が縮まらない
質問させて下さい。テーブルで表を作ったのですが、縦幅が縮まらなく困っています。具体的には、セル内の余白を５ピクセルにしているのですがテキストとセルの境界線の縦の距離が何倍も開いてしまいます。ソース↓ （ボディ内はこれで全てです。テキストを変えただけです。　使用ソフトはドリームウィーバー８） --------------------------------------------------------- <table width="490" height="395" cellpadding="0" cellspacing="0" bgcolor="#666666"> <tr> <td width="490" height="393"> <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="1"> <tr> <td width="121" height="35" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td width="344" height="35" align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> <tr> <td height="22" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> </table> </td> </tr> </table> --------------------------------------------------------- 試したこと：各セルの縦幅を揃えて指定してみる。指定を全て　　　　　　外してから、再度調節してみる。セル内のテキスト　　　　　　表示位置を上位置に設定してみるなどです。。。どこかすごい見落としをしているのでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
テーブル内に隙間が。
テーブル内に隙間が。質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。これを無くすにはどうすればいいのでしょうか。（html/cssの書き直さなくてはならない箇所はどこでしょうか）高さは左右のセルとも300に合わせているのですが…。どなたかご教授願います。  <style TYPE="text/css">  </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> no content </td></tr> </table>
- ベストアンサー
- ホームページ作成ソフト
HTMLタグでテーブル枠を曲線で記述したい
添付画像は「オークションプレートメーカー２」のテンプレートで、少しアレンジしようと思っています。最上部の角が丸くなっていますが、下記のどの部分にあたるのでしょうか? すみませんが教えてください。 <br><center> <table cellspacing=0 border=0 cellpadding=0 width=550> <tr> <td width=1></td> <td width=1></td> <td width=1></td> <td width=2></td> <td width=2></td> <td width=536></td> <td width=2></td> <td width=2></td> <td width=1></td> <td width=1></td> <td width=1></td> </tr> <tr> <td height=1 colspan=4></td> <td height=1 bgcolor=#FF6666></td> <td rowspan=5 bgcolor=#FF6666 align=center> <font color=#FFFFFF size=5><b> </b></font> </td> <td height=1 bgcolor=#FF6666></td> <td height=1 colspan=4></td> </tr> <tr> <td height=1 colspan=3></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=3></td> </tr> <tr> <td height=1 colspan=2></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=2></td> </tr> <tr> <td height=2></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=2></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666><br><br></td> <td colspan=5 bgcolor=#FF6666><br><br></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666></td> <td> <table width=100% cellspacing=5 border=0 cellpadding=10 bgcolor=#FFCC66> <tr> <td align=left bgcolor=#FFF0F0> <font color=#993333 size=3> </font> </td> </tr> </table> </td> <td colspan=5 bgcolor=#FF6666></td> </tr> <tr> <td height=7 colspan=11 bgcolor=#FF6666></td> </tr> <tr> <td height=2 colspan=11></td> </tr> <tr> <td height=2 colspan=11 bgcolor=#FF6666></td> </tr> </table> <br> <font color="#999999" size=1>+ + +　この商品説明は</font> <a href="http://www.auclinks.com/" target="_blank"><font color="#666666" size=1>オークションプレートメーカー２</font></a> <font color="#999999" size=1>で作成しました　+ + +</font><font color="#FFFFFF" size=1><br>No.113.002.002</font><br> </center>
- ベストアンサー
- HTML
次のテーブルのセル内文字を小さく
したいのですがセル内文字ごとに<h7></h7>を付けると文字は小さくなるもののセルの高さがむしろ高くなり文字が上に貼りついてしまいますセルの高さも同じように文字にあわせて小さくできるような設定はあるでしょうか? <table border=1 cellspacing=0 cellpadding=0> <caption align=left> <nobr>あいうえおかきくけこ<nobr/> </caption> <tr><td colspan=3>abc</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td colspan=3 height=15></td></tr> </table>
- ベストアンサー
- HTML
tableでcolspanを使うと次行以下のセルの幅が均等に？
tableでcolspanを使うと、colspanで結合した行の次行以下のセルの幅が均等になってしまいます。どうすれば、colspanで結合した行の次行以下のセルの幅が均等になるのを防げるでしょうか?IE6,IE7 意図的にスタイルシートは、使用しないでください。例： <table width="300" border="1" cellspacing="1" cellpadding="5"> <tr> <td colspan="2" width="284" align="center"> タイトルセル </td> </tr> <tr align="left" valign="top"> <td width="100"> セル左 <td> <td width="171"> セル右 <td> </tr> <table> 上記の場合、本来ならば、左のセルの幅（100px）が右のセルの幅(171px)より狭いはずなのに、左のセルの幅と右のセルの幅が均等になっていしまいます。下記コード部分を上記のコードから削除すると、本来の比率で左のセルと右のセルの幅が表示されます。 <tr> <td colspan="2" width="284" align="center"> タイトルセル </td> </tr> よろしくお願いします。
- ベストアンサー
- HTML
テーブルが一行下がる・・・
HTMLを作成していて、横一列に並べたいのに何故か一行下がってしまいます。具体的には、 <TABLE width="50" border=1 align=left> <TBODY> <TR><TD noWrap align=middle>項目A</TD> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> </TABLE> <TABLE width="20" border=1 align=middle> <TBODY> <TR><TD noWrap align=middle>タイトル</TD></TR> </TBODY> </TABLE> <TABLE width="50" border=1 align=right> <TBODY> <TR><TD noWrap align=middle>項目B</TD></TR> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> というソースで、「項目A」→「タイトル」→「項目B」と横一線に並べたいのですが、何故か「項目B」が一行下がって表示されます・・・ HTMLを作るのは初めてで、色々と調べたのですがよく分かりませんでした・・・。どなたか助けてください！！よろしくお願い致しますm(_ _)m
- ベストアンサー
- HTML
１ページにテーブルを複数設定・一括変更の方法について
一つのページに複数（十数個）を設置する場合まとめて設置する方法はあるのでしょうか？また、サイズ等を変更したい場合も一括して変更する方法はあるのでしょうか？例えば、以下の物を数十個設置する場合設置自体は簡単なのですが、変更が・・、どうにか簡単にできる方法があればご教授下さい。 <center> <table border="0" width="600" cellspacing="1" bgcolor="#0fb1ff" height="200"> <tbody> <tr> <td colspan="2" width="600" bgcolor="#ffffff" height="20" align="center"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="100" align="center"></td> <td width="400" bgcolor="#ffffff" height="100"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> <tr> <td width="200" height="20" bgcolor="#ffffff" align="center"></td> <td width="400" height="20" bgcolor="#ffffff"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> </tbody> </table> </center> 宜しくお願いします。
- ベストアンサー
- HTML
テーブルだらけのページをスッキリさせたい
いま、ホームページビルダーで趣味のサイトを作っているところなのですが、 HTMLのことでわからない事があるので教えてください。現在、大きなテーブルの中にさらに小さなテーブルをいれています。そのためタグがとてもごちゃごちゃしています。小さなテーブルはサイト更新の度に追加していく予定なので、見た目よりデータが重いページになってしまうと思います。これをなんとかスッキリさせたいのですが良い方法はあるでしょうか？スタイルシートを使えばいいのでしょうか？どのように使用すれば無駄の無い形になるか具体的なアドバイスをいただけると助かります。参考までに作りかけのタグを載せました。悪い部分等があったら、ぜひお願いします。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サイト名「タイトル未定」</TITLE> </HEAD> <BODY> <CENTER> <TABLE border="0" cellpadding="0" cellspacing="0" width="840"> <TBODY> <TR> <TD colspan="2" align="center" height="40">サイト名　タイトル</TD> </TR> <TR> <TD colspan="2" align="center">サイトの説明と注意事項</TD> </TR> <TR> <TD colspan="2" height="15"> <HR> </TD> </TR> <TR> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#009900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">チューリップ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月1日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#999900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">さくら</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月2日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> </TR> <TR> <TD align="center"></TD> <TD align="center"></TD> </TR> <TR> <TD colspan="2"> <HR> </TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
テーブルの枠線が消えません。
テーブルの枠線が消えません。 HTMLでテーブルを作成しています。以下のようなHTMLなのですが、先頭行の8と9の間や二行目の15と30の間に縦線が入ってしまいます。これを表示させたくないのですが、よく見ると一番右側の項目は全て縦線が入っています。これを消すことはできるでようか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j"> </head> <body> <table> <tr bgcolor="blue"> <td colspan="60" align="center">8</td> <td colspan="60" align="center">9</td> <td colspan="60" align="center">10</td> </tr> <tr bgcolor="lightblue"> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> </tr> <tr align="center"> <td colspan="60" bgcolor="lightpink" height="40">仕事</td> <td colspan="60" bgcolor="lightgreen">休み</td> <td colspan="60" bgcolor="lightpink">仕事</td> </tr> <tr align="center"> <td colspan="80" bgcolor="lightgreen" height="40">休み</td> <td colspan="40" bgcolor="lightblue">仕事</td> <td colspan="60" bgcolor="lightgreen">休み</td> </tr> <tr align="center"> <td colspan="50" bgcolor="lightgreen" height="40">休み</td> <td colspan="60" bgcolor="lightpink">仕事</td> <td colspan="70" bgcolor="lightgreen">休み</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML