Question

我是HTML / CSS / JavaScript新手，目前正在努力处理我的表内文字。

具体来说，对我来说，如果我的列标题和任何＆＃34;子标签＆＃34;我在表格单元格中使用粗体，但我希望所有剩余的文本（＆＃34;基本＆＃34;文本）不是粗体。我如何实现这一目标？

以下是我的描述中的一些示例HTML。如果我按原样保留代码，所有文本都会以粗体显示：

＆＃13;

    <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>

＆＃13;

Answer 1

要求最少的代码更改，只需将基本文本单元格周围的<th>标记更改为<td>即可。 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应该用于构造文档和用于设置样式的CSS。如果使用外部css文件，它将更加干净，更容易阅读和维护，而不是使用style属性。

此外，HTML5不支持align属性。应该使用CSS代替text-align。

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标记应位于表格thead标记内，请检查{{3} } {和td在tbody标记内。

还有一件事是你不应该设置内联属性，第一个是你必须多次执行，第二个是它不利于SEO和验证HTML语法。

我刚刚更新了您的HTML和CSS代码，您可以在线查看：HTML th tag on W3C

HTML code：

<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;
}

HTML表格文本差异（粗体/非粗体）

3 个答案: