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

Question

我的问题是如何使用不同的列数量进行排序？ 例如，我希望在此图片的最后一行中有2列（每个单元格的部分必须为50％）。 我的另一个问题是如何从单元格中的第一行开始创建文本（中心单元格，在此图片中）？

我的代码是：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

首先，直接回答。将您的页面视为网格。你希望网格上有足够的正方形可以被3和2整除。说，6然后使用colspan将每列设置为需要的网格列数 - 因此，colspan = 2表示3列，并且colspan 2列= 3。

<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用于布局，并且使用表格来布局可能更快，但灵活性较差。

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>