🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

📖 INDEX

# helloworld
# comments-html
# html-tag
# head-tag
# body-tag
# p-tag
# b-tag
# i-tag
# strong-tag
# em-tag
# s-tag
# cite-tag
# blockquote-tag
# sub-tag
# sup-tag
# u-tag
# big-tag
# tt-tag
# pre-tag
# q-tag
# code-tag
# samp-tag
# var-tag
# abbr-tag
# acronym-tag
# address-tag
# ins-tag
# strike-tag
# span-tag
# hr-tag
# title-tag
# meta-tag
# base-tag
# link-tag
# a-tag
# script-tag
# noscript-tag
# style-tag
# div-tag
# h1-tag
# h2-tag
# h3-tag
# h4-tag
# h5-tag
# h6-tag
# ul-tag
# ol-tag
# li-tag
# dl-tag
# dt-tag
# dd-tag
# menu-tag
# dir-tag
# table-tag
# tr-tag
# th-tag
# td-tag
# thead-tag
# tbody-tag
# tfoot-tag
# caption-tag
# col-tag
# colgroup-tag
# form-tag
# input-tag
# textarea-tag
# select-tag
# option-tag
# button-tag
# label-tag
# fieldset-tag
# legend-tag
# datalist-tag
# optgroup-tag
# radio-buttons
# checkboxes
# submit
# reset
# input-types
# input-attributes
# meta-tags
# open-graph
# twitter-cards
# geotagging
# img-tag
# video-tag
# audio-tag
# iframe-tag
# map-tag
# area-tag
# object-tag
# param-tag
# applet-tag
# controls
# autoplay
# loop
# muted
# poster
# src
# type
# javascript-in-html
# basefont-tag
# bdo-tag
# font-tag
# frame-tag
# frameset-tag
# noframes-tag
LOADING ENGINE...

<table>

AI & DATA SCIENCE // table-tag

The <table> element represents tabular data — information organized into rows and columns, like a spreadsheet.

Syntax

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
</table>

Deep Dive Course

**`<table>`** is the container for genuinely tabular data — data with real rows and columns where each cell's meaning depends on its row and column headers, like a pricing table, a schedule, or a spreadsheet export. It's built from `<tr>` (rows) containing `<th>` (header cells) and `<td>` (data cells), and can be further organized with `<thead>`, `<tbody>`, `<tfoot>`, and `<caption>`. Tables should NOT be used for page layout — that was a common practice in the 1990s/2000s, but CSS (flexbox, grid) is the correct tool for visual layout today.

1Understanding <table>

`<table>` is the container for genuinely tabular data — data with real rows and columns where each cell's meaning depends on its row and column headers, like a pricing table, a schedule, or a spreadsheet export. It's built from <tr> (rows) containing <th> (header cells) and <td> (data cells), and can be further organized with <thead>, <tbody>, <tfoot>, and <caption>. Tables should NOT be used for page layout — that was a common practice in the 1990s/2000s, but CSS (flexbox, grid) is the correct tool for visual layout today.

💡

A quick test for whether content belongs in a <table>: if you removed the visual borders, would the information still clearly relate row-to-column? If yes, it's tabular data. If you're just trying to align unrelated boxes on a page, use CSS Grid or Flexbox instead.

editor.html
<table>
  <caption>Quarterly Sales</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
</table>
localhost:3000

2Practical Example

Here is a real-world application of <table> showing how it is used in production HTML.

SidebarMain content
Main content
localhost:3000
Sidebar | Main content (achieved with CSS flexbox instead of a fake table)

3Best Practices

Follow these guidelines when working with <table>:

1. Use <table> only for genuinely tabular data, never for page layout

2. Always include header cells (<th>) so screen readers can announce column/row context per cell

3. Add a <caption> describing what the table represents

⚠️

Tip: A quick test for whether content belongs in a <table>: if you removed the visual borders, would the information still clearly relate row-to-column? If yes, it's tabular data. If you're just trying to align unrelated boxes on a page, use CSS Grid or Flexbox instead.

editor.html
<table>
  <caption>Quarterly Sales</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
</table>
localhost:3000

Examples

Example 01Basic Usage
<table>
  <caption>Quarterly Sales</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
</table>
Example 02Advanced Example
<!-- Anti-pattern: using a table purely for visual layout -->
<!-- Bad -->
<table><tr><td>Sidebar</td><td>Main content</td></tr></table>

<!-- Good -->
<div style="display: flex;">
  <aside>Sidebar</aside>
  <main>Main content</main>
</div>

Best Practices

  • Use only for genuinely tabular data, never for page layout
  • Always include header cells (
    • ) so screen readers can announce column/row context per cell
  • Add a
    • describing what the table represents

    Interview Question

    Why is using <table> for page layout considered a bad practice today?▼

    Hint: Think about what a screen reader announces for table cells, versus what layout divs communicate.

    Screen readers announce table cells with row/column context ('row 2, column 1 of 3') because they assume the content is genuinely tabular data — using a table purely for visual layout floods screen reader users with confusing, meaningless navigation cues about rows and columns that don't represent real data relationships. It's also far less flexible for responsive design than CSS Grid or Flexbox, which is why tables-for-layout was abandoned once CSS layout tools matured.

    Exercises

    EasyPractice using <table> in a real scenario.
    View Solution
    <table>
  <caption>Quarterly Sales</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
</table>

    Frequently Asked Questions

    Why is using <table> for page layout considered a bad practice today?▼

    Screen readers announce table cells with row/column context ('row 2, column 1 of 3') because they assume the content is genuinely tabular data — using a table purely for visual layout floods screen reader users with confusing, meaningless navigation cues about rows and columns that don't represent real data relationships. It's also far less flexible for responsive design than CSS Grid or Flexbox, which is why tables-for-layout was abandoned once CSS layout tools matured.

    Related Functions

    tr-tagth-tagtd-tagcaption-tag