如何在 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

试试这个，效果很好，希望它能解决你的问题。添加此 class

.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>

Answer 2

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

首先，直接回答。将您的页面想象成一个网格。您希望网格上有足够的正方形可以被 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>

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

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

How make a row with different columns in html

html

html-table

cell