0 votes

Table with rowspan=2 in several columns

I want to make a table with 3 columns. In which some rows occupy multiple rows for the first and second columns but not for the third.

This is the code I have for now:

<!DOCTYPE html>
<html>

<head>
  <style>
    table, th, td {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <table style=width:100%>
    <caption>Informe</caption>
    <tr>
      <th>Test</th><th>Resultado</th><th>Capturas</th>
    </tr>
    <tr>
      <th>Test 1</th>
      <td bgcolor="#00FF00">OK</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="1">Test 2</th>
      <td bgcolor="#00FF00">OK</td>
      <td><a href="file:pantalla.png">pantalla.png</a></td>
    </tr>
    <tr>
      <th rowspan="2">Test 3</th>
      <td bgcolor="#FF0000">FALLO</td>
      <td><a href="file:pantalla2.png">pantalla2.png</a></td>
    </tr>
    <tr>
      <td bgcolor="#FF0000" ></td>
      <td><a href="file:resultados.html">resultados.html</a></td>
    </tr>
    <tr>
      <th rowspan="1">Test 4</th>
      <td bgcolor="#00FF00">OK</td>
      <td><a href="file:pantalla3.png">pantalla3.png</a></td>
    </tr>
  </table>
</body>

</html>

That gives me this result:

introducir la descripción de la imagen aquí

And I want this result in that the two rows of the Result column of Test 3 are joined :

introducir la descripción de la imagen aquí

1voto

Fernando Forcén Points 1430

I'm on my cell phone and I haven't seen it well. But the problem I see is that you don't have the rowspan in the second column.

For Test 3 row the correct code is :

<tr>
  <th rowspan="2">Test 3</th>
  <td rowspan="2" bgcolor="#FF0000">FALLO</td> <!-- Esta es la línea que estaba mal -->
  <td><a href="file:pantalla2.png">pantalla2.png</a></td>
</tr>
<tr>
  <!-- Al añadir otro rowspan quitamos el td que había aquí -->
  <td><a href="file:resultados.html">resultados.html</a></td>
</tr>

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X