CODEWITHSUNDEEP
htmlhtml-table
Piero Virgilio
Piero Virgilio

Reputation: 37

HTML table with 2 rows in the first column and 3 rows in the second one

I'm trying to do a table like this (that I've done in Word) Table

Can someone suggest me the right way with rowspan and colspan?

Upvotes: 0

Views: 3142

Answers (3)

PaulH
PaulH

Reputation: 3049

I you don't know how to do it, there is this nice online tool: http://www.tablesgenerator.com/html_tables enter image description here

It generates the following code:

<table border="1">
  <tr>
    <th rowspan="2">A1</th>
    <th>B1</th>
  </tr>
  <tr>
    <td rowspan="2">B2</td>
  </tr>
  <tr>
    <td rowspan="2">A2</td>
  </tr>
  <tr>
    <td>B3</td>
  </tr>
</table>

Upvotes: 1

Ankit
Ankit

Reputation: 1104

For creating table like this you need only four row and set rowspan for this

<table width="400" height="400" border="1" cellspacing="0" cellpading="0">
            <tr>
                <td rowspan="2">a</td>
                <td>a</td>
            </tr>
            <tr>
                <td rowspan="2">a</td>
            </tr>
            <tr>
                 <td rowspan="2">a</td>
            </tr>
            <tr>
                <td>a</td>
            </tr>
        </table>

Upvotes: 1

Sometowngeek
Sometowngeek

Reputation: 607

Normally you should show your work, so we can see how far you have gotten and where we can help you. Your table consists of 6 rows. Try this...

<table>
    <tr>
        <td rowspan="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td rowspan ="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum vel ex sed blandit. Maecenas consequat mi id mi sodales facilisis. Phasellus rhoncus in nulla vel aliquam. Pellentesque laoreet, eros id dapibus auctor, sapien lorem laoreet libero, non ultrices mi neque eu massa. Ut non convallis est, eget sodales lectus. Mauris nec lacus augue. Fusce pellentesque tempor lectus ut mattis.</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td rowspan ="2">Nam ligula est, consequat vulputate dui nec, tempus dapibus lectus. Fusce aliquam mauris dolor, vitae congue dolor auctor tempor. Integer vel faucibus velit. Praesent hendrerit leo vel nulla egestas convallis. Aenean iaculis dapibus libero ac egestas. Nunc luctus fermentum velit eu faucibus. Nullam consequat dui massa, a pulvinar lacus rutrum non. Cras eu odio eget tellus scelerisque tempus vitae id nunc.</td>
    </tr>
    <tr>
        <td rowspan="3">Praesent pharetra nibh dolor, et pharetra purus pulvinar nec. Quisque dolor orci, dictum et aliquet a, tincidunt vel lectus. Cras vitae ante pulvinar, accumsan lacus in, porttitor ex. Nulla sodales dolor nec fringilla pulvinar. Pellentesque vulputate fermentum enim, ut tristique est efficitur et. Morbi molestie porttitor eros eu eleifend. Nam volutpat porta congue. Vestibulum fringilla nisi nec rutrum egestas. In eu elit ultricies, eleifend orci vulputate, semper leo. Donec vehicula lorem sit amet libero finibus tincidunt in ut mauris. Mauris fermentum est sit amet accumsan tempor. Nunc nec odio et felis congue tincidunt quis sit amet augue. Suspendisse sed hendrerit sapien, id interdum nunc. Donec rutrum augue non velit rhoncus consequat. Duis eleifend molestie magna quis euismod.</td>
    </tr>
    <tr>
        <td rowspan ="2">Morbi id interdum massa. In mollis malesuada ultrices. Pellentesque vehicula tellus ac dictum faucibus. Maecenas nibh tellus, ultrices non dapibus non, tempus sit amet erat. Nunc in lobortis mauris. Vivamus a tristique mi. Aenean egestas justo quis consequat lacinia. Quisque felis eros, ornare sit amet ante vitae, dignissim euismod felis. Pellentesque tempor eget mauris hendrerit porta. Donec venenatis ipsum a neque vestibulum, in ornare ante tempus. Donec vitae mauris sapien. In vel suscipit ex. Mauris sed nunc nec erat accumsan tempor. Etiam cursus lectus a diam eleifend aliquam. Ut dignissim mi et mauris maximus, eget sollicitudin lorem luctus. Morbi ornare rhoncus egestas.</td>
    </tr>
    <tr>
    </tr>
</table>

Rowspan means the <td> cell spans over X amount of rows. For instance: <td rowspan="2"> means the cell spans over two rows. More details and an example of it can be found on the w3school's Rowspan Reference page.

Colspan, like rowspan, means the <td> cell spans across X amount of columns. For instance: <td colspan="2"> means the cell spans across two columns. More details and an example of it can be found on the w3school's Colspan Reference page.

In your case, to ensure that rowspan works properly, it is helpful to make sure that your table has enough rows to allow it to layout properly.

In your table, it shows the first column with two cells and the second column with three cells. It is not possible to split 3 into two or two into three, so I figured the good number would be six rows. I made sure there were six rows in there, and put <td rowspan="3"> and <td rowspan="2"> where they belong.

If it gives any problems, let me know.

Upvotes: 2

Related Questions