HTMLテーブルのテキストの相違点（太字/太字ではない）

Question

私はHTML/CSS/JavaScriptを初めて使用しており、現在テーブル内のテキストで苦労しています。

具体的には、私のコラムヘッダーとテーブルセル内で使用する「サブラベル」を太字にしても問題ありませんが、残りのテキスト（「基本」テキスト）を太字にしないことをお勧めします。これをどのように達成するのですか？

ここに私の説明に付随するいくつかのサンプルHTMLがあります。

<table align="center" style="width: 90%;"> 
 
    <tbody> 
 
    <tr><th style="background-color: #032046;" width="45%"> 
 
    <p style="font-family: helvetica; color: white; font-size: 11;">Column Label 1</p> 
 
    </th><th style="background-color: #032046;" width="15%"> 
 
    <p style="font-family: helvetica; color: white; font-size: 11;">Column Label 2</p> 
 
    </th><th style="background-color: #032046;" width="15%"> 
 
    <p style="font-family: helvetica; color: white; font-size: 11;">Column Label 3</p> 
 
    </th></tr> 
 
    <tr><th border="0" style="background-color: #d4e6fd;"> 
 
    <p style="font-family: helvetica; font-size: 11;"><strong><span style="text-decoration: underline;">Sublabel here.</span></strong></p> 
 
    <p align="left" style="font-family: helvetica; font-size: 11;">"Basic" text here.</p> 
 
    </th><th border="0" style="background-color: #d4e6fd;"> 
 
    <p align="center" style="font-family: helvetica; font-size: 11;">"Basic" text here.</p> 
 
    </th><th border="0" style="background-color: #d4e6fd;"> 
 
    <p align="center" style="font-family: helvetica; font-size: 11;">"Basic" text here.</p> 
 
    </th></tr> 
 
    </tbody> 
 
    </table>

Answer 1

単に<td>への基本的なテキスト細胞の周りにあなたの<th>タグを変更する最小限のコードの変更を必要とするために：私は、コードを残している場合であるように、すべてのテキストは太字出てきます。 thタグの太字はデフォルトで太字です。

あなたのコードにもいくつかの不要なタグが含まれていますが、私はすぐにその例を試してみます。

例のテーブルレイアウトは

<table> 
    <tr> 
     <th>Table heading 1</th> 
     <th>Table heading 1</th>   
     <th>Table heading 1</th> 
    </tr> 
    <tr> 
     <td>Table data 1</td> 
     <td>Table data 2</td> 
     <td>Table data 3</td> 
    </tr> 
</table> 

私は、あなたがCSSとスタイルtable、tr、thとtdセレクタではなく、インラインスタイルを使用してテーブルを使用することをお勧めだろう。これにより、コードが大幅に単純化され、より使いやすくなります。

Answer 2

デフォルト動作のthタグは、ほとんどのブラウザでテキストを太字にすることです。本体の内部には、単にtdタグを代わりに使用してください。また、strongタグはテキストを太字にします

文書をスタイルするために使用するHTMLと文書を構成するには、HTMLを使用する必要があります。 style属性を使用する代わりに、外部CSSファイルを使用するとDRYerの方がずっと読みやすく、管理しやすくなります。

また、HTML5ではalignプロパティもサポートされていません。代わりにtext-alignでCSSを使用する必要があります。

td { background: #d4e6fd; } 
 

 
p { 
 
    font-family: helvetica; 
 
    font-size: 11; 
 
} 
 

 
th { background: #032046; } 
 
th:first-child { width: 45%; } 
 
th:not(:first-child) { width: 15%; } 
 
th > p { color: white; } 
 
span { text-decoration: underline; } 
 

 
td:first-child p { 
 
    text-align: left; 
 
} 
 

 
td:not(:first-child) p { 
 
    text-align: center; 
 
}

<table align="center" style="width: 90%;"> 
 
    <tbody> 
 
    <tr> 
 
     <th> 
 
     <p>Column Label 1</p> 
 
     </th> 
 
     <th> 
 
     <p>Column Label 2</p> 
 
     </th> 
 
     <th> 
 
     <p>Column Label 3</p> 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <td border="0"> 
 
     <p><span>Sublabel here.</span></p> 
 
     <p>"Basic" text here.</p> 
 
     </td> 
 
     <td border="0"> 
 
     <p>"Basic" text here.</p> 
 
     </td> 
 
     <td border="0"> 
 
     <p>"Basic" text here.</p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

あなたが thタグを使用しているため、これは（ブラウザに基づいて）デフォルトのために大胆です

あなたのテキストの太字、thタグがtbody内HTML th tag on W3C、およびtdを確認し、テーブル内のtheadタグ内でなければなりませんタグ。

もう1つのことは、インライン属性をスタイルするべきではないということです。最初は何度もやらなければならないことです.2番目はSEOと検証HTML構文には適していません。

私はちょうどあなたのHTMLとCSSのコードを更新し、あなたが上でオンラインに確認することができます。https://jsfiddle.net/1y4uksc5/

HTMLコード：

<table align="center" style="width: 90%;"> 
<thead> 
    <tr> 
    <th width="45%"> 
     <p>Column Label 1</p> 
    </th> 
    <th width="15%"> 
     <p>Column Label 2</p> 
    </th> 
    <th width="15%"> 
     <p>Column Label 3</p> 
    </th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td> 
     <p><strong class="text-underline">Sublabel</strong></p> 
     <p>"Basic" text here.</p> 
    </td> 
    <td> 
     <p>"Basic" text here.</p> 
    </td> 
    <td> 
     <p>"Basic" texthere.</p> 
    </td> 
    </tr> 
</tbody> 

CSSコード：

th { 
    background-color: #032046; 
    color: white; 
} 
td { 
    background-color: #d4e6fd; 
} 
.text-underline { 
    text-decoration: underline; 
} 
p { 
    font-family: helvetica; 
    font-size: 11; 
}