Table Basics

An HTML table is defined with the <table> tag. A table row is created with <tr>, a table data cell with <td>, and a table header cell with <th>. By default, <th> text is bold and centered.

Table Structure

Every cell in a row must be inside a <tr> element. All rows must be inside the <table> element. A simple border can be added with the CSS border property. For the border to appear around every cell (not just the outer table), add border-collapse: collapse to the table.

<table> — Container for the whole table
<tr> — A table row
<th> — Header cell (bold, centered)
<td> — Data cell

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table Basics</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ccc; padding: 8px 12px; }
    th { background: #f0f0f0; }
  </style>
</head>
<body>
  <h1>Student Grades</h1>
  <table>
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Grade</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>Mathematics</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Science</td>
      <td>B+</td>
    </tr>
    <tr>
      <td>Carol</td>
      <td>History</td>
      <td>A-</td>
    </tr>
  </table>
</body>
</html>

HTML

Full Editor

Pro Tip

Use border-collapse: collapse on every table — it removes the double-border that appears between adjacent cells by default and gives your table a clean, professional look.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned