HTML Project - Creating a Simple HTML Table

 Create a simple HTML table to display data in a structured format. This guide covers the basics of creating tables in HTML, including rows, columns, and headers. 

Step 1: Create an HTML File

Create a new file and name it table.html.


Step 2: Add the Basic HTML Structure

Set up the basic HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
</head>
<body>
    <!-- Content will go here -->
</body>
</html>


Step 3: Create a Table

Inside the <body> tag, create a table using the <table> element. Add rows (<tr>) and cells (<td> for regular cells, <th> for header cells).

<body>
    <h1>Student Grades</h1>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Math</th>
            <th>Science</th>
            <th>English</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>90</td>
            <td>85</td>
            <td>88</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>92</td>
            <td>89</td>
            <td>94</td>
        </tr>
    </table>
</body>
  • <table>: Defines the table.
  • <tr>: Defines a table row.
  • <th>: Defines a table header.
  • <td>: Defines a table cell.
  • border="1": Adds a border around the table cells.


Final Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
</head>
<body>
    <h1>Student Grades</h1>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Math</th>
            <th>Science</th>
            <th>English</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>90</td>
            <td>85</td>
            <td>88</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>92</td>
            <td>89</td>
            <td>94</td>
        </tr>
    </table>
</body>
</html>