CODEWITHSUNDEEP
htmlcss
Harlan
Harlan

Reputation: 197

Table in HTML with 2 columns; first column is 7 rows, second column is 1 row

I'm trying to create a table in HTML. 7 rows in the first column, only 1 in the second. I can't figure it out. I feel like I am missing something simple.

Upvotes: 1

Views: 9107

Answers (3)

Marc Audet
Marc Audet

Reputation: 46825

You want to use the rowspan attribute to stretch the second column over the rows of the first column, as shown below.

Reference: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6.1

td {
  border: 1px solid gray;
}
<table>
  <tr>
    <td>C 1</td>
    <td rowspan="7">C 2</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
</table>

Upvotes: 2

Nerdy
Nerdy

Reputation: 192

You can use the rowspan attribute to have a cell span multiple rows.

Code: 

<html>
    <body>
        <table>
            <tr>
                <td>Row 1</td>
                <td rowspan="7">Row 1</td>
            </tr>
            <tr>
                <td>Row 2</td>
            </tr>
            <tr>
                <td>Row 3</td>
            </tr>
            <tr>
                <td>Row 4</td>
            </tr>
            <tr>
                <td>Row 5</td>
            </tr>
            <tr>
                <td>Row 6</td>
            </tr>
            <tr>
                <td>Row 7</td>
            </tr>
        </table>
    </body>
</html>

Upvotes: 2

Andrew Brooke
Andrew Brooke

Reputation: 12173

You can simply put a second td element in the first row, and change its rowspan to 7

<table border="1" style="width:100%">
  <tr>
    <td>a</td>
    <td rowspan="7">b</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
</table>

Upvotes: 3

Related Questions