Как сделать строку с разными столбцами в 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> 

Другая категория ответов заключается в том, что вам следует избегать использования таблиц для вашей структуры макета. Для этого есть много результатов 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>