CODEWITHSUNDEEP
htmlcsshtml-table
user13269961
user13269961

Reputation:

Tables, rowspan and colspan

This is my code about this table attached. I have a problem because my table is not how I wanted. I am beginner in html5 and I really have troubles with rowspan and colspan. Any tricks to learn better about rowspan and colspan and how can I do the table how I want.

table,
td,
th {
  border: 1px solid #666;
  border-collapse: collapse;
}
<table>
  <tr>
    <th colspan="2">Hi</th>
    <th>Hi</th>
  </tr>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>hi</td>
  </tr>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>hi</td>
    <td>hi</td>
  </tr>
</table>

Image

Upvotes: 2

Views: 1208

Answers (2)

Kunal Raut
Kunal Raut

Reputation: 2584

Try using this 

<!DOCTYPE html>
<html>
<head>
<style> 
table,
td,
th {
  border: 1px solid #666;
  border-collapse: collapse;
}


</style>
</head>
<body>

<table>
  <tr>
    <th colspan="2">Hi</th>
    <th colspan="2">Hi</th>
  </tr>
  <tr>
    <td>Hi</td>
    <td >Hi</td>
    <td colspan="2">hi</td>
  </tr>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>hi</td>
    <td>hi</td>

  </tr>
</table>

</body>
</html>

In short colspan and rowspan means merging columns or rows respectively.

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115212

You need to add colspan for the last cell in the header and the last cell in the first row of the table body otherwise column sum will be only 3 for them(based on colspan). 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    table,
    td,
    th {
      border: 1px solid #666;
      border-collapse: collapse;
    }
  </style>
  <title>Assignment 4</title>
</head>

<body>
  <table>
    <tr>
      <th colspan="2">Hi</th>
      <th colspan="2">Hi</th>
    </tr>
    <tr>
      <td>Hi</td>
      <td>Hi</td>
      <td colspan="2">hi</td>
    </tr>
    <tr>
      <td>Hi</td>
      <td>Hi</td>
      <td>hi</td>
      <td>hi</td>
    </tr>
  </table>


</body>

</html>

Upvotes: 2

Related Questions