Question

这是表格的html代码我在结果表中遇到了disorentation问题。请帮助。

enter image description here

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 80%;
    background-color:#A6F7EE;

}

th {
    height: 50px;
}
</style>
</head>

<body>
<table align="center">
<tr>
<th>State</th>
<th>Condition</th>
<th>Slab Low</th>
<th>Slab High</th>
<th>Rate(in Rs)</th>
</tr> 
<tr>
<td rowspan="4">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
<td colspan="3">Consumption less than 50 Units</td> <td align="center"> 1</td> <td align="center">50</td> <td align="center">1.45</td
></tr>
<tr>
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units <td>  1</td>  <td>50</td> <td>    1.45</td>
</tr><tr>
<td>51</td> <td>100</td>    <td>2.6</td>
</tr>

</body>
</html>

结果表迷失了方向，可以做出相同大小的表行。

Answer 1

我不确定我是否完全理解这个问题，但是代码中的结束标记和其中一个td rowpans存在一些问题，这可能就是为什么它没有正确呈现。请尝试以下方法：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 80%;
    background-color:#A6F7EE;

}

th {
    height: 50px;
}
</style>
</head>

<body>
<table align="center">
<tr>
    <th>State</th>
    <th>Condition</th>
    <th>Slab Low</th>
    <th>Slab High</th>
    <th>Rate(in Rs)</th>
</tr> 
<tr>
    <td rowspan="3">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
    <td colspan="3">Consumption less than 50 Units</td><td>1</td><td>50</td><td>1.45</td>
</tr>
<tr>
    <td colspan="3" rowspan="2">Consumption between 1 & 100 Units</td>
    <td>1</td>
    <td>50</td>
    <td>1.45</td>
</tr>
<tr>
    <td>51</td>
    <td>100</td>
    <td>2.6</td>
</tr>
</body>
</html>

Answer 2

如果修复关闭和打开标记不起作用，那么（按照屏幕截图）HTML标记应该是这样的（只需更改值）;

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <style>
    table,
    td,
    th {
      border: 1px solid black;
    }
    table {
      border-collapse: collapse;
      width: 80%;
      background-color: #A6F7EE;
    }
    th {
      height: 50px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>1a</th>
      <th>1b</th>
      <th>1c</th>
      <th>1d</th>
      <th>1e</th>
      <th>1f</th>
    </tr>
    <tr>
      <td rowspan="4">2a</td>
      <td>2b</td>
      <td>2c</td>
      <td>2d</td>
      <td>2e</td>
      <td>2f</td>
    </tr>
    <tr>
      <td rowspan="2">3a</td>
      <td rowspan="2">3b</td>
      <td>3c</td>
      <td>3d</td>
      <td>3e</td>
    </tr>
    <tr>
      <td>4c</td>
      <td>4d</td>
      <td>4e</td>
    </tr>
    <tr>
      <td>5b</td>
      <td>5c</td>
      <td>5d</td>
      <td>5e</td>
      <td>5f</td>
    </tr>
  </table>
</body>

</html>

＆＃13;

我发现使用css设计复杂表格有困难

2 个答案: