It merges multiple columns into one.

It merges multiple rows into one.

HTML Tables: Displaying Data in Rows and Columns - Learn HTML | Revochamp

Name: HTML Tables: Displaying Data in Rows and Columns
Availability: InStock
Author: Revochamp

What are HTML Tables?

HTML tables are used to display data in a structured format using rows and columns.

Basic Table Structure

HTMLRead-only

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

Table Elements

Tag	Description
<table>	Defines a table
<tr>	Table row
<th>	Header cell
<td>	Data cell
<thead>	Table header group
<tbody>	Table body
<tfoot>	Table footer

Table with Header, Body, Footer

HTMLRead-only

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>22</td></tr>
    <tr><td>Bob</td><td>28</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">End of Data</td></tr>
  </tfoot>
</table>

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>22</td></tr>
    <tr><td>Bob</td><td>28</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">End of Data</td></tr>
  </tfoot>
</table>

Colspan and Rowspan

HTMLRead-only

<table>
  <tr>
    <th colspan="2">Full Name</th>
  </tr>
  <tr>
    <td rowspan="2">John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Smith</td>
  </tr>
</table>

<table>
  <tr>
    <th colspan="2">Full Name</th>
  </tr>
  <tr>
    <td rowspan="2">John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Smith</td>
  </tr>
</table>

Table Styling with CSS

CSSRead-only

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

Best Practices

Use tables only for tabular data
Use <th> for headers
Keep tables simple and readable
Use CSS for styling
Use semantic sections (thead, tbody, tfoot)

Common Mistakes

Using tables for layout design
Missing table headers
Overcomplicating with too many spans
Not making tables responsive

Conclusion

HTML tables are powerful for displaying structured data. Proper usage ensures clarity, accessibility, and maintainability.

Tag

Description

<table>

Defines a table

<tr>

Table row

<th>

Header cell

<td>

Data cell

<thead>

Table header group

<tbody>

Table body

<tfoot>

Table footer

<table> <thead> <tr><th>Name</th><th>Age</th></tr> </thead> <tbody> <tr><td>Alice</td><td>22</td></tr> <tr><td>Bob</td><td>28</td></tr> </tbody> <tfoot> <tr><td colspan="2">End of Data</td></tr> </tfoot> </table>

HTML Tables: Displaying Data in Rows and Columns

HTML Tables: Displaying Data in Rows and Columns

What are HTML Tables?

Basic Table Structure

Table Elements

Table with Header, Body, Footer

Colspan and Rowspan

Table Styling with CSS

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

HTML Tables: Displaying Data in Rows and Columns

HTML Tables: Displaying Data in Rows and Columns

What are HTML Tables?

Basic Table Structure

Table Elements

Table with Header, Body, Footer

Colspan and Rowspan

Table Styling with CSS

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?