HTML
JAVASCRIPT
CSS
PYTHON

HTML TABLE

HTML Table

HTML tables are used to organize data into rows and columns, providing a structured way to display information. The <table> element defines a table, with the following key components:

  • <tr> (Table Row): Defines a row in the table.
  • <td> (Table Data): Defines individual data cells within a row.
  • <th> (Table Header): Defines header cells, typically bold and centered by default.

Tables can include additional attributes like border, cellpadding, and cellspacing to enhance presentation, though modern designs often use CSS for styling.

HTML Table Example

Here’s a simple HTML table displaying Fruits Data:

<!DOCTYPE html>
<html lang="en">
<head>   
    <title>HTML Table Example</title>
    <style>
        table {
            width: 60%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }       
    </style>
</head>
<body>
    <h4 style="text-align: center;">HTML Table Example</h4>
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Quantity</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Apples</td>
                <td>100</td>
                <td>2569</td>
            </tr>
            <tr>
                <td>Bananas</td>
                <td>20</td>
                <td>150</td>
            </tr>            
        </tbody>
    </table>
</body>
</html>

Explanation:

  • Basic Structure:

    • The <table> tag contains all the rows (<tr>).
    • Each row contains data cells (<td>) or header cells (<th>).

  • Styling:

    • Basic styling with CSS ensures a clean and readable layout.
    • border-collapse: collapse; removes gaps between table borders.
Previous Next