CODEWITHSUNDEEP
csshtml
Mohamed Ali
Mohamed Ali

Reputation: 782

Creating Html Border with multiple rows and columns

I am trying to make something like this. enter image description here

I am experimenting adding rows and columns but kind of stuck. Creating the table is where I'm stuck. I know how to add in the info the table requires if I could just make the table. Any help would be appreciated.

So far I have this:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <table border="5">
    <tr>
      <th>Month</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td> 200</td>
    </tr>
    <tr>
      <tr>
        <td height="100"> Row 1</td>
      </tr>
      <tr>
        <td height="100"> Row 2 </td>
      </tr>
      <tr>
        <td height="100"> Row 3 </td>
      </tr>
    </tr>
  </table>
  <p><a href="index.html"> Link back to Home Page!</a></p>
</body>
</html>

Upvotes: 1

Views: 1203

Answers (2)

VXp
VXp

Reputation: 12068

You just need to play with the values of the rowspan and colspan attributes, then repeat the pattern:

table {
  width: 100%;
}

td {
  text-align: center;
}

table, th, td {
  border: 1px solid;
}
<table>
    <!--tr can also omit this row just for the clarity that "Row 2" really is the second row inside the table layout; on the other hand, you might leave it because of the design purposes -->
    <th colspan="4">Month</th>
  <!-- /tr -->
  <tr>
    <td rowspan="3">January</td>
    <th colspan="3">Heading</th>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
  </tr>
  <tr>
    <td rowspan="3">February</td>
    <th colspan="3">Heading</th>
  </tr>
  <tr>
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
  </tr>
  <tr>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
  </tr>
  <tr>
    <td rowspan="3">March</td>
    <th colspan="3">Heading</th>
  </tr>
  <tr>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
  </tr>
  <tr>
    <td>Row 9</td>
    <td>Row 9</td>
    <td>Row 9</td>
  </tr>
</table>

Upvotes: 1

Hitesh Kansagara
Hitesh Kansagara

Reputation: 3526

this will be your table structure

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <table border="5">
    <tr>
      <th colspan=4>Please,Insert an Image</th>
    </tr>
    <tr>
      <td rowspan=3>Row 1</td>
      <td colspan=3>Insert Heading</td>
    </tr>

      <tr>
        <td height="100"> Row 1</td>
        <td height="100"> Row 1</td>
        <td height="100"> Row 1</td>
      </tr>
      <tr>
        <td height="100"> Row 1</td>
        <td height="100"> Row 1</td>
        <td height="100"> Row 1</td>
      </tr>
      <tr>
        <td height="100" rowspan=3> Row 2 </td>
        <td height="100" colspan=3> Insert Heading </td>
      </tr>
      <tr>
        <td height="100"> Row 2 </td>
        <td height="100"> Row 2 </td>
        <td height="100"> Row 2 </td>
      </tr>
      <tr>
        <td height="100"> Row 2 </td>
        <td height="100"> Row 2 </td>
        <td height="100"> Row 2 </td>
      </tr>
      <tr>
        <td height="100" rowspan=3> Row 3 </td>
        <td height="100" colspan=3> Insert Heading </td>
      </tr>
      <tr>
        <td height="100"> Row 3 </td>
        <td height="100"> Row 3 </td>
        <td height="100"> Row 3 </td>
      </tr>
      <tr>
        <td height="100"> Row 3 </td>
        <td height="100"> Row 3 </td>
        <td height="100"> Row 3 </td>
      </tr>

  </table>
  <p><a href="index.html"> Link back to Home Page!</a></p>
</body>
</html>

Upvotes: 0

Related Questions