css - HTML テーブル テキストの違い (太字/非太字)

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>

コードの変更を最小限に抑えるには、基本的なテキスト セルを囲む タグを に変更します。デフォルトでは、タグのフォントの太さは太字です。

ただし、コードには不要なタグもいくつか含まれています。できるだけ早く例を投稿するようにします.

テーブル レイアウトの例

<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 セレクターを使用します。これにより、コードが大幅に簡素化され、使いやすくなります。

タグのデフォルトの動作は、ほとんどのブラウザーでテキストを太字にすることです。 body 内では、代わりに td タグを使用してください。また、強力なタグはテキストを太字で表示します

ドキュメントの構造化には HTML を使用する必要があることに注意してください。または CSS を使用してスタイルを設定します。 style 属性を使用する代わりに、外部の css ファイルを使用すると、より DRYER になり、読みやすく、維持しやすくなります。

また、align プロパティは HTML5 ではサポートされていません。テキストの配置には 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>

タグを使用したため、テキストは太字になっています。デフォルトでは (ブラウザによって異なります) 太字になっています。タグは annu タグ内にある必要があります。表から始めて、W3C の HTML タグと body タグ内の td を確認してください。

もう 1 つは、属性をインラインでスタイル設定するべきではないということです。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;
}