如何偏移某些表格单元格

时间:2019-07-05 12:24:19

标签: html css

我想画一张桌子,如下图。我试图画这个,但输出显示错误。请帮助我找出错误。

<table height="600" width="800" border="1" align="center">
  <tr height="350">
    <td width="200" align="center"> Logo </td>
    <td width="200" align="center"> Photo </td>
    <td width="200" align="center"> Info </td>
    <td width="200" align="center"> Gpa </td>
  </tr>
  <tr height="250">
    <td width="225" align="center"> Subject </td>
    <td width="200" align="center"> 1st </td>
    <td width="200" align="center"> 2nd </td>
    <td width="175" align="center"> 3rd </td>
  </tr>
</table>

enter image description here

1 个答案:

答案 0 :(得分:1)

如果您确实希望表格看起来像这样,那么这里有一些代码适合您。我基本上将您的桌子一分为二,只给每个高度的一半(300而不是600),并相应设置边框的样式。

<table height="300" width="800" align="center" style="border: 1px solid #333;">
    <tbody>
    <tr height="350">
    <td width="200" align="center" style="border-right: 1px solid #333;">Logo</td>
    <td width="200" align="center" style="border-right: 1px solid #333;">Photo</td>
    <td width="200" align="center" style="border-right: 1px solid #333;">Info</td>
    <td width="200" align="center">Gpa</td>
    </tr>
    </tbody>
</table>
<table height="300" width="800" align="center" style="border: 1px solid #333; border-top: 0;">
    <tbody>
    <tr height="250">
    <td width="225" align="center" style="border-right: 1px solid #333;">Subject</td>
    <td width="200" align="center" style="border-right: 1px solid #333;">1st</td>
    <td width="200" align="center" style="border-right: 1px solid #333;">2nd</td>
    <td width="175" align="center">3rd</td>
    </tr>
    </tbody>
</table>