如何在html中创建具有不同列的行

Question

我的问题是，我怎样才能用不同的列数量创建一行？ 例如，我想在这张图片的最后一行有 2 列（每个单元格的部分必须是 50%）。 我的另一个问题是，如何使文本从单元格中的第一行开始（中心单元格，在这张图片中）？

我的代码是：

table {
  border: 1px solid black;
  border-collapse: collapse;
  border-spacing: 5px;
}
th,
td {
  padding: 10px;
}

<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
  <caption>web design homework</caption>
  <tr>
    <th colspan="3">My Website</th>
  </tr>
  <tr bgcolor="#77E022" height="20px" align="left">
    <td colspan="3">
      <a href="www.google.com" style="text-decoration:none">home</a> &nbsp;&nbsp;&nbsp; <a href="www.google.com" style="text-decoration:none">products</a> &nbsp;&nbsp;&nbsp; <a href="www.google.com" style="text-decoration:none">contact us</a>
    </td>
  </tr>
  <tr>
    <td width="25%">last post</td>
    <td rowspan="2" width="50%">hello my name is mohammad ghorbani and i am studying computer enginerring in arak</td>
    <td>our friends</td>
  </tr>
  <tr>
    <td>our statics</td>
    <td>24</td>
  </tr>
  <tr>
    <td>our social pages</td>
    <td>about us</td>

  </tr>
</table>

Answer 1

您的问题有两个主要答案类别。

首先，直接回答。把你的页面想象成一个网格。您希望网格上有足够的正方形可以被 3 和 2 整除。比如说 6。然后使用 colspan 将每列设置为所需的网格列数 - 因此，colspan=2 表示 3 列，colspan =3 代表 2 列。

<table border=1>
  <tr>
    <td colspan=6>My Website</td>
  </tr>
  <tr>
    <td colspan=6>home, products, contact us</td>
  </tr>
  <tr>
    <td colspan=2 style="width:33%">last post</td>
    <td colspan=2 rowspan=2 style="width:33%">hello my name</td>
    <td colspan=2 style="width:33%">our friends</td>
  </tr>
  <tr>
    <td colspan=2 style="width:33%">our statics</td>
    <td colspan=2 style="width:33%">24</td>
  </tr>
  <tr>
    <td colspan=3 style="width:50%">our social pages</td>
    <td colspan=3 style="width:50%">about us</td>
  </tr>
</table>

另一个答案类别是您应该避免在布局结构中使用表格。这个有很多谷歌结果，而且是非常基于意见的，所以我只想说，一般来说表格应该用于数据，css 用于布局，使用表格布局可能更快，但灵活性较差。

Answer 2

试试这个，它运作良好，希望它能解决您的问题。 添加这个类

.column{display:inline-block; width:49%;}

<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr  bgcolor="#77E022"
height="20px" align="left" >
<td  colspan="3" > 
<a href="www.google.com" style="text-decoration:none">home</a> &nbsp;&nbsp;&nbsp; <a href="www.google.com" style="text-decoration:none">products</a> &nbsp;&nbsp;&nbsp; <a href="www.google.com" style="text-decoration:none">contact us</a>
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td valign="top" rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
<tr>
<td colspan="3" valign="top">
<div class="column"> our social pages</div>
<div class="column"> about us </div>

</td>

</tr>
</table>