CODEWITHSUNDEEP
htmlhtml-tablemerge
Theo E
Theo E

Reputation: 77

Why is my table in html not working properly?

I have a table and I've merged blank and picture correctly, but story does not want to merge. Below is the HTML

<table border="3">
      <tr>
       <td>title</td>
    <td>created by</td>
     </tr>
    <tr>
    <td>blank</td>
    <td rowspan="2">picture</td>
     </tr>
     <tr>
    <td>story</td>

     </tr>
    <tr>
    <td>story</td>
    <td>date</td>
     </tr>
    <tr>
    <td>story</td>
    <td rowspan="3">blank</td>
    </tr>
    <tr>
    <td>tags</td>
    </tr>
    <tr>
    <td>lar e</td>
 
      </tr>
      <tr>
    <td>material </td>
    <td>comments</td>
  </tr>
    </table>

I added rowspan="3" to the first story, and deleted the other 2 but it didn't work. What am I doing wrong?

This is what I want.

+------------+------------+
| title      | created by |
+------------+------------+
| blank      |            |
+------------+ picture    |
|            |            |
+            +------------+
| story      | date       |
+            +------------+
|            |            |
+------------+            |
| tags       | blank      |
+------------+            |
| lar e      |            |
+------------+------------+
| material   | comments   |
+------------+------------+

Upvotes: 0

Views: 333

Answers (3)

AnonymousSB
AnonymousSB

Reputation: 3604

You're missing a closing table row and table tag, but after adding a border to visually see the layout, it appears your layout is correct.

table  { border-collapse:collapse }
td { border: solid 1px black }
<table>
    <tr>
        <td>title</td>
        <td>created by</td>
    </tr>
    <tr>
        <td>blank</td>
        <td rowspan="2">picture</td>
    </tr>
    <tr>
        <td rowspan="3" style="padding: 50px 0">story</td>
    </tr>
    <tr>
        <td>date</td>
    </tr>
    <tr>
        <td rowspan="3">blank</td>
    </tr>
    <tr>
        <td>tags</td>
    </tr>
    <tr>
        <td>lar e</td>
    </tr>
    <tr>
        <td>material</td>
        <td>comments</td>
    </tr>
</table>

Upvotes: 0

B. Desai
B. Desai

Reputation: 16436

You just need some style attribute with rowspan. check following code

<table border=1>
      <tr>
       <td>title</td>
    <td>created by</td>
     </tr>
    <tr>
    <td>blank</td>
    <td rowspan="2">picture</td>
     </tr>
     <tr>
    <td rowspan="3" style="padding:20px 0px">story</td>

     </tr>
    <tr>
    
    <td>date</td>
     </tr>
    <tr>
    
    <td rowspan="3">blank</td>
    </tr>
    <tr>
    <td>tags</td>
    </tr>
    <tr>
    <td>lar e</td>
 
      </tr>
      <tr>
    <td>material </td>
    <td>comments</td>
  </tr>
    </table>

Upvotes: 1

vdhoangson
vdhoangson

Reputation: 39

try it

<table style="border: 1px solid">
        <tr>
            <td style="border: 1px solid">title</td>
            <td style="border: 1px solid">created by</td>
        </tr>
        <tr>
            <td style="border: 1px solid">blank</td>
            <td rowspan="2" style="border: 1px solid">picture</td>
        </tr>
        <tr>
            <td style="border: 1px solid">story</td>
        </tr>
        <tr>
            <td style="border: 1px solid">story</td>
            <td style="border: 1px solid">date</td>
        </tr>
        <tr>
            <td style="border: 1px solid">story</td>
            <td rowspan="3" style="border: 1px solid">blank</td>
        </tr>
        <tr>
            <td style="border: 1px solid">tags</td>
        </tr>
        <tr>
            <td style="border: 1px solid">lar e</td>
        </tr>
        <tr>
            <td style="border: 1px solid">material </td>
            <td style="border: 1px solid">comments</td>
        </tr>
    </table>

Upvotes: 0

Related Questions