Question

我正在制作一个html页面，其中我正在使用表格来处理某些项目。如下图所示： Sample image

此表的代码如下：

<table border="2">
 <tbody><tr>
  <td width="50">
    <b>
        <span style="color:red">
            Id
        </span>
    </b>
  </td>
  <td width="150">
    <b>
        <span style="color:red">
            Product Name
        </span>
    </b>
  </td>
  <td width="150">
    <b>
        <span style="color:red">
            Product Price
        </span>
    </b>
  </td>
  <td width="50"></td>
 </tr>

      <tr>
   <td>1</td>
   <td>Lamps</td>
   <td><i>$3.5</i></td>
   <td> <a href="/app_name/editpage.htm?id=1&amp;prodname=Lamps&amp;prodprice=3.5">Edit</a></td>
   <td><a href="/app_name/deleteprod.htm?id=1&amp;prodname=Lamps&amp;prodprice=3.5">Delete</a></td>
  </tr>

      <tr>
   <td>2</td>
   <td>Table</td>
   <td><i>$75.29</i></td>
   <td> <a href="/app_name/editpage.htm?id=2&amp;prodname=Table&amp;prodprice=75.29">Edit</a></td>
   <td><a href="/app_name/deleteprod.htm?id=2&amp;prodname=Table&amp;prodprice=75.29">Delete</a></td>
  </tr>

      <tr>
   <td>3</td>
   <td>Chair</td>
   <td><i>$22.81</i></td>
   <td> <a href="/app_name/editpage.htm?id=3&amp;prodname=Chair&amp;prodprice=22.81">Edit</a></td>
   <td><a href="/app_name/deleteprod.htm?id=3&amp;prodname=Chair&amp;prodprice=22.81">Delete</a></td>
  </tr>

     </tbody></table>

现在我的问题是为什么标题行没有完成所以怎么做？我是html和css的新手，我正在学习它。请需要指导。谢谢。

Answer 1

底部行中有更多列。有很多解决方案：

解决问题的一种方法（不那么漂亮）是在顶行添加更多单元格。

<td width="50">&nbsp;</td>
<td width="50">&nbsp;</td>

（http://jsfiddle.net/tCrRG/）

或者，请尝试查看colspan和rowspan：

<td width="150" colspan="3">
    <b>
        <span style="color:red">
            Product Price
        </span>
    </b>
  </td>

（http://jsfiddle.net/tCrRG/1/）

或者，使用colspan：

在顶行添加一个单元格

<td colspan="2">
    &nbsp;
</td>

（http://jsfiddle.net/tCrRG/2/）

Answer 2

当后续行中有五个单元格时，标题行中只放置三个单元格。要使第三个标题列填充到右侧，请使用 colspan = 3 ：

<td width="150" colspan=3>
    <b>
        <span style="color:red">
            Product Price
        </span>
    </b>
  </td>

另外，正如上面其他人所指出的，使用内联样式或嵌套样式标记并不是一种好习惯。尝试使用CSS类作为列标题：

HTML：

<td class="header_cell">
    Product Price
</td>

CSS：

.header_cell {
    width:150px;
    color:red;
    font-weight:bold; 
}

Answer 3

不会显示空单元格，您可以使用space或  html实体来放置一些空内容。

您可以使用colspan属性使单元格扩展为2列。

<table border="2">
 <tbody><tr>
  <td width="50">
    <b>
        <span style="color:red">
            Id
        </span>
    </b>
  </td>
  <td width="150">
    <b>
        <span style="color:red">
            Product Name
        </span>
    </b>
  </td>
  <td width="150">
    <b>
        <span style="color:red">
            Product Price
        </span>
    </b>
  </td>
  <td width="50" colspan="2">&nbsp;</td>
 </tr>

      <tr>
   <td>1</td>
   <td>Lamps</td>
   <td><i>$3.5</i></td>
   <td> <a href="/app_name/editpage.htm?id=1&amp;prodname=Lamps&amp;prodprice=3.5">Edit</a></td>
   <td><a href="/app_name/deleteprod.htm?id=1&amp;prodname=Lamps&amp;prodprice=3.5">Delete</a></td>
  </tr>

      <tr>
   <td>2</td>
   <td>Table</td>
   <td><i>$75.29</i></td>
   <td> <a href="/app_name/editpage.htm?id=2&amp;prodname=Table&amp;prodprice=75.29">Edit</a></td>
   <td><a href="/app_name/deleteprod.htm?id=2&amp;prodname=Table&amp;prodprice=75.29">Delete</a></td>
  </tr>

      <tr>
   <td>3</td>
   <td>Chair</td>
   <td><i>$22.81</i></td>
   <td> <a href="/app_name/editpage.htm?id=3&amp;prodname=Chair&amp;prodprice=22.81">Edit</a></td>
   <td><a href="/app_name/deleteprod.htm?id=3&amp;prodname=Chair&amp;prodprice=22.81">Delete</a></td>
  </tr>

     </tbody></table>

Answer 4

我认为您希望在编辑/删除链接上方有一个空单元格，而不是增加产品价格单元格。

因此，在空单元格中尝试使用colspan = 2

<td colspan="2" width="50"></td>

代替

<td width="50"></td>

在你的第一行。

Answer 5

我的代码改进了很多。

<style type="text/css">
    table {
        width: 400px;
    }
    table th{
        font-weight: bold;
        color: red;
    }
    table tr td:nth-child(3) {
        font-style: italic;
    }
</style>
<table border="2">
    <tbody>
        <tr>
            <th>Id</th>
            <th>Product Name</th>
            <th>Product Price</th>
            <th colspan="2">Actions</th>
        </tr>

        <tr>
            <td>1</td>
            <td>Lamps</td>
            <td>$3.5</td>
            <td><a href="/app_name/editpage.htm?id=1&amp;prodname=Lamps&amp;prodprice=3.5">Edit</a></td>
            <td><a href="/app_name/deleteprod.htm?id=1&amp;prodname=Lamps&amp;prodprice=3.5">Delete</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>Table</td>
            <td>$75.29</td>
            <td><a href="/app_name/editpage.htm?id=2&amp;prodname=Table&amp;prodprice=75.29">Edit</a></td>
            <td><a href="/app_name/deleteprod.htm?id=2&amp;prodname=Table&amp;prodprice=75.29">Delete</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>Chair</td>
            <td>$22.81</td>
            <td><a href="/app_name/editpage.htm?id=3&amp;prodname=Chair&amp;prodprice=22.81">Edit</a></td>
            <td><a href="/app_name/deleteprod.htm?id=3&amp;prodname=Chair&amp;prodprice=22.81">Delete</a></td>
        </tr>

    </tbody>
</table>

说明

删除了用于表示标记的用法。替换为<style>元素。
用适当的<th>元素替换标题单元格。
添加了Actions标头colspan="2"，这意味着它将展开2列（填满剩余空间）。

HTML表格格式中的问题

5 个答案:

说明