CODEWITHSUNDEEP
html
platinums
platinums

Reputation: 673

Impossible Table! Multiple Merges dont appear correctly

Im trying to merge cells 1+2+3

I have already done so with the current code 

<td rowspan="2" colspan="2"> &nbsp;1</td>

Ive then left the 2nd row blank to allow for this.

 <tr>  </tr>

Somehow this fails and it also removes a row as there should be 7 in total. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<table width="100%" border="1">
  <tbody>
    <tr>
      <td rowspan="4" colspan="2">&nbsp;</td>
      <td rowspan="2" colspan="2"> &nbsp;1</td>
    </tr>
    <tr>  </tr>

    <tr>
      <td>&nbsp;2</td>
      <td>&nbsp;3</td>

    </tr>
    <tr>

      <td>&nbsp;</td>
      <td>&nbsp;</td>

    </tr>
    <tr>
      <td colspan="2">&nbsp;Name</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;Age</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;Cost</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

<body>
</body>
</html>

Upvotes: 0

Views: 43

Answers (1)

kooshy
kooshy

Reputation: 134

Here's a thing with rowspan, if you look at this code, it has the same structure as yours, only I merged 1,2,3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
    table, th, td {
    border: 1px solid black;
}
</style>
<body>
    <table width="100%">
        <tr>
            <td rowspan="3">
                big
            </td>
            <td colspan="2" rowspan="2" >
                1
            </td>

        </tr>
        <tr>
        </tr>
        <tr>
            <td>
                3
            </td>
            <td>4</td>

        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>

        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>

        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>

        </tr>
    </table>
</body>
</html>

Once I did the rowspan, 1,2,3 merged into what looks like a single row, although in reality it's two rows.

This is another example. I do the rowspan exactly as I did in the first example, I simply added another column to the right (x).

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
    table, th, td {
    border: 1px solid black;
}
</style>
<body>
    <table width="100%">
        <tr>
            <td rowspan="3">
                big
            </td>
            <td colspan="2" rowspan="2">
                1
            </td>
            <td>x</td>
        </tr>
        <tr>
                <td>x</td>
        </tr>
        <tr>
            <td>
                3
            </td>
            <td>4</td>
            <td>x</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>x</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>x</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>x</td>
        </tr>
    </table>
</body>
</html>

Now the table looks exactly as you would expect it, but only because the "x" column holds it together. Without the "x" column, the table loses the desired look although it is exactly what you want it to look like. if you for example add Height="50px" in the first example to your 2nd <td>

<td colspan="2" rowspan="2" Height="50px">
   1
</td>

This will make your table look exactly as you expect it.

Or you could add another column like I did in the 2nd example and simply hide it.

Upvotes: 1

Related Questions