我有下面的HTML表格。
jsfiddle链接:

<table id="tabla" align="center" cellspacing="15" cellpadding="0">
    <tr>
        <td><input type="button" value="Form View"></input></td>
        <td><input type="button" value="Table view"></input></td>
    </tr>
    <tr>
        <td>Classification1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
    <tr>
        <td>Classification1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
    <tr>
        <td>Classification1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
    <tr>
        <td>Classification1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
</table>

这里每行有多个tds。我想将标签名称改为粗体,但不改为值。
我该怎么做?
前任:
<td>Classification1:</td>
 <td>value</td>

这里Classification1:应该是粗体,value应该是正常的。

最佳答案

桌子是这项工作的错误工具!
这有两个原因:
易访问性-使用屏幕阅读器的视力受损的人使用您的网站会更轻松。
搜索引擎将能够更容易地解析网站。
使用数据定义列表:

 <dl>
      <dt>Classification1:</dt>
      <dd>value</dd>

      <dt>Source:</dt>
      <dd>value</dd>

      <dt>Sic1:</dt>
      <dd>Value</dd>

      <dt>Sic Description1:</dt>
      <dd>value</dd>

      <dt>Source:</dt>
      <dd>value</dd>
</dl>

CSS:
dt, dd {margin-right:10px;margin-left:10px;}
dt {font-weight:bold;}

dl>dd, dl>dt {float:left}
dl:after {clear:both;float:none;display:block;content:'';}

这是复制在这个小提琴:http://jsfiddle.net/netinept/GsG7C/9/

10-06 04:22