Tables, rowspan and colspan

Admin 1
Viewed 287

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

html-table css html
2 Answers

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>

user_30372570

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.

user_106521940
Related