Home » Exercises » HTML Exercises » HTML Tables

HTML Tables

Write an HTML program to create a table of student marks

Description: Create a table that shows the name and marks of three students, with a header row and borders.

Hint:

  • Use th for the header cells and td for the data cells.
  • A table has no border by default, so add a border with CSS.

HTML program to create a table

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Marks</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #999; padding: 8px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Name</th><th>Marks</th></tr>
    <tr><td>Robin</td><td>85</td></tr>
    <tr><td>Maria</td><td>92</td></tr>
    <tr><td>John</td><td>78</td></tr>
  </table>
</body>
</html>

Output in the browser:

Output in the browser
Name Marks
Robin 85
Maria 92
John 78

How it works

  • Each tr is a row. The first row has header cells (th), which are bold.
  • border-collapse: collapse joins the borders of neighbour cells into one line.

Read HTML Tables.

Write an HTML program to create a table with colspan and rowspan

Description: Create a small timetable with a heading cell that covers two columns, and one subject name that covers two rows.

Hint:

  • colspan merges cells in a row, and rowspan merges cells in a column.
  • Remove the cells that are covered by the merged cell.

HTML program for colspan and rowspan

<table border="1">
  <tr>
    <th colspan="2">Monday Timetable</th>
  </tr>
  <tr>
    <td rowspan="2">Morning</td>
    <td>Maths</td>
  </tr>
  <tr>
    <td>Science</td>
  </tr>
  <tr>
    <td>Afternoon</td>
    <td>Sports</td>
  </tr>
</table>

Output in the browser:

Output in the browser
Monday Timetable
Morning Maths
Science
Afternoon Sports

How it works

  • The heading cell has colspan="2", so it covers both columns.
  • “Morning” has rowspan="2", so it covers two rows. Because of this, the “Science” row has only one cell.
  • The border="1" attribute is used here only to keep the code short. In real pages use CSS borders.

Read Rowspan and Colspan.