4

テーブルセルに配置属性を配置することと、テキスト配置CSS属性を使用することの違いを理解しようとしています。以下のコードは、IE とその他で異なる結果を示しています。IE では、align は最終的にすべてのサブ子を揃えるので、テキスト 'test' は中央揃えになりますが、FF/Webkit ではそうではなく、左揃えのままです。正しい動作は何ですか?

<!DOCTYPE html>
<html>

 <head>
  <style>
   table { width: 60%; }
   table td { border: 1px solid black; }
  </style>
 </head>

 <body>
  <table>
   <tbody>
    <tr>
     <td align='center'>
      <table>
       <tbody>
        <tr>
         <td>test</td>
        </tr>
       </tbody>
      </table>
     </td>
    </tr>
   </tbody>
  </table>
 </body>

</html>
4

2 に答える 2

13

属性は古いスタイルのalign「tag-soup」HTML であり、公式の W3 ドキュメントに従って廃止されました。のように、CSS スタイルを優先する

<td style="text-align: center;">
    <!-- Content -->
</td>

さらに良いのは、TD に className (たとえば、"center" のようなセマンティックな className) を指定し、そのスタイルをスタイルシートに設定することです。

td.center {
    text-align: center;
}
于 2010-09-22T23:19:10.207 に答える
2

CSS:text-align と HTMLElement.align プロパティは、ブロック要素 (例: テーブル) が子として存在する場合、動作が異なるため、注意して置き換えてください。

以下のデモを参照してください。

.Container { border: solid 1px gray; width: 400px }
.Container table { border: solid 1px yellow; width: 250px }
.Container div { border: solid 1px red; width: 250px }

.CenterSelf { margin: auto }

.CenterChildren { text-align: center /* For inline elements. */ }
.CenterChildren table, .CenterChildren div
{ margin: auto /* For common block elements. Add other element selectors if necessary. */ }


.ResultTable { border-collapse: collapse }
.ResultTable td { text-align: center; border: solid 1px #ccc; padding: 0.3em }
<table class="Container" align="center">
    <tr><td>TABLE1</td></tr>
    <tr>
        <td>
            <p>This is a paragraph.</p>
            <table>
                <tr>
                    <td>This is a children table.</td>
                </tr>
            </table>
            <div>This is a div.</div>
        </td>
    </tr>
</table>
<hr />
<table class="Container" style="text-align: center">
    <tr><td>TABLE2</td></tr>
    <tr>
        <td>
            <p>This is a paragraph.</p>
            <table>
                <tr>
                    <td>This is a children table.</td>
                </tr>
            </table>
            <div>This is a div.</div>
        </td>
    </tr>
</table>
<hr />
<div id="Container1" class="Container" align="center">
    DIV1
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<div id="Container2" class="Container" style="text-align: center">
    DIV2
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<div id="Container3" class="Container CenterChildren">
    DIV3
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<div id="Container4" class="Container CenterChildren CenterSelf">
    DIV4
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<hr />
<table class="ResultTable">
    <tr>
        <td>&nbsp;</td>
        <td colspan="2">TABLE</td>
        <td colspan="2">DIV</td>
    </tr>
    <tr>
        <td>Elements</td>
        <td>align="center"</td>
        <td>style=&quot;text-align: center&quot;</td>
        <td>align="center"</td>
        <td>style=&quot;text-align: center&quot;</td>
    </tr>
    <tr>
        <td>Self</td>
        <td>O</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
    </tr>
    <tr>
        <td>inline child</td>
        <td>X</td>
        <td>O</td>
        <td>O</td>
        <td>O</td>
    </tr>
    <tr>
        <td>inline child of inline child</td>
        <td>X</td>
        <td>O</td>
        <td>X</td>
        <td>O</td>
    </tr>
    <tr>
        <td>block child</td>
        <td>X</td>
        <td>X</td>
        <td>O</td>
        <td>X</td>
    </tr>
    <tr>
        <td>inline child of block child</td>
        <td>X</td>
        <td>O</td>
        <td>O</td>
        <td>O</td>
    </tr>
</table>
O: Centered
X: Not centered

于 2015-09-10T09:05:17.130 に答える