HTML Tables

HTML Tables

Tables in HTML are used to display data in rows and columns, just like a spreadsheet. Whether you're showing product data, comparison charts, or structured reports, HTML tables provide a clean way to organize and present your information.

Basic Table Structure

HTML tables are created using the <table> element along with several child tags:

• <tr> – Table row
• <th> – Table header cell
• <td> – Table data cell

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

Output:

| Name  | Age | City     |
| ----- | --- | -------- |
| John  | 25  | New York |
| Alice | 30  | London   |

Table Tags Explained

• <table>: Defines the table.
• <tr>: Defines a table row.
• <th>: Defines a table header (bold and centered by default).
• <td>: Defines a table cell (data).
• <caption>: Adds a title to the table.
• <thead>, <tbody>, <tfoot>: Group different parts of the table (optional but useful for styling and structure).

Adding a Caption

<table>
  <caption>Student Grades</caption>
  <tr>
    <th>Name</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Emma</td>
    <td>A</td>
  </tr>
</table>

Table with Borders and Width

<table border="1" width="100%">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Phone</td>
    <td>$499</td>
  </tr>
</table>

Note: It's better to use CSS for styling instead of HTML attributes.

Styling Tables with CSS

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

Merging Cells with colspan and rowspan

colspan: Merge columns

<td colspan="2">Merged Column</td>

rowspan: Merge rows

<td rowspan="2">Merged Row</td>

Best Practices

• Always use <th> for header cells for accessibility and SEO.
• Keep tables simple and readable.
• Use CSS for layout and styling.
• Use <caption> for a meaningful table title.

FAQ – Frequently Asked Questions

Q1: What is the difference between <th> and <td>?
A: <th> is used for header cells and is bold/centered by default. <td> is used for regular data cells.

Q2: How do I make a table cell span multiple columns?
A: Use the colspan attribute. Example: <td colspan="3">Text</td>.

Q3: Can I style tables with CSS instead of using HTML attributes?
A: Yes, it's recommended to use CSS for better flexibility and cleaner code.

Q4: Are HTML tables responsive by default?
A: No. You'll need CSS media queries or horizontal scrolling (overflow-x) for responsive tables on small screens.

Q5: When should I use tables in HTML?
A: Use tables for displaying tabular data. Avoid using tables for layout purposes (use CSS Grid or Flexbox instead).

🔔 Stay Updated

Learn how to use AI to build, market and grow your business. Subscribe our newsletter to get AI tips, tools and prompts in your inbox to power your marketing, sales and business.

Tags

#html #htmltables #tabletutorial #learnhtml #webdevelopment #responsivehtml #htmlforbeginners #datatable