Two data cells for one header

Asked

Viewed 52 times

1

How can I create a table where I have two td for only one th, example:

| Tabela Exemplo  | Exemplo |
| parte1 | parte2 |         |
html

2 answers

5


To expand a table cell you need to use the attribute colspan. I remember that colspan is to expand the column, and rowspan is to extend the line. If you want the column to extend by two cells, you put colspan="2"

td {
  border: 1px solid #000;
}
<table>
  <tr>
    <td colspan="2">colspan 2</td>
    <td>normal</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<p>Agora com rowspan</p>
<table>
  <tr>
<td>01</td>
<td rowspan="2">rowspan="2"</td>
  </tr>
  <tr>
<td>02</td>
  </tr>
</table>

2

I fully agree with the reply of @hugocsl, only that I think I can clarify a little better as the attributes colspan and rowspan work.

With a small change, adding the rowspan can occupy more than one line as well, and the value can also be greater than two, according to your need.

td {
  border: 1px solid #000;
}
<table>
  <tr>
    <td colspan="2"> Tabela Exemplo </td>
    <td> Exemplo </td>
  </tr>
  <tr>
    <td rowspan="2"> parte 1 </td>
    <td> parte 2 </td>
    <td> parte 3 </td>
  </tr>
  <tr>
    <td> parte 2 </td>
    <td> parte 3 </td>
  </tr>
</table>

You can mix the two attributes also, so that a cell occupies more than one row and more than one column! :)

Reference:

https://www.w3schools.com/tags/att_td_colspan.asp https://www.w3schools.com/tags/att_td_rowspan.asp

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.