What is the purpose of caption?

It provides a title for the table.

It groups columns for styling or formatting.

How to make tables responsive?

Wrap tables in a scrollable container using CSS.

Advanced HTML Tables: Accessibility, Styling & Responsive Design - Learn HTML | Revochamp

Name: Advanced HTML Tables: Accessibility, Styling & Responsive Design
Availability: InStock
Author: Revochamp

Why Advanced Tables?

Advanced HTML tables improve usability, accessibility, and responsiveness. They are essential for handling large datasets and complex layouts.

Table Caption

The <caption> tag provides a title for the table.

HTMLRead-only

<table>
  <caption>Student Data</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

<table>
  <caption>Student Data</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

Column Grouping (colgroup)

HTMLRead-only

<table>
  <colgroup>
    <col style="background-color: #f2f2f2">
    <col>
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

<table>
  <colgroup>
    <col style="background-color: #f2f2f2">
    <col>
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

Accessibility (scope & headers)

Use scope and headers attributes to improve accessibility for screen readers.

HTMLRead-only

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

Responsive Tables

Wrap tables in a container with overflow for better responsiveness.

HTMLRead-only

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </table>
</div>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </table>
</div>

Striped Table Styling

CSSRead-only

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Hover Effect

CSSRead-only

tr:hover {
  background-color: #ddd;
}

tr:hover {
  background-color: #ddd;
}

Sticky Header

CSSRead-only

th {
  position: sticky;
  top: 0;
  background: white;
}

th {
  position: sticky;
  top: 0;
  background: white;
}

Scrollable Table

CSSRead-only

.table-container {
  max-height: 300px;
  overflow-y: auto;
}

.table-container {
  max-height: 300px;
  overflow-y: auto;
}

Best Practices

Use captions for clarity
Ensure accessibility with scope and headers
Make tables responsive for mobile devices
Use CSS for styling instead of inline styles
Keep data simple and readable

Common Mistakes

Ignoring accessibility features
Not making tables responsive
Overloading tables with too much data
Using tables for layout instead of data

Conclusion

Advanced HTML tables enhance usability and accessibility. Proper techniques ensure tables work well across devices and for all users.

<div style="overflow-x:auto;"> <table border="1"> <caption>Sample Table</caption> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Alice</td> <td>22</td> </tr> </table> </div>

Why Advanced Tables?

Advanced HTML tables improve usability, accessibility, and responsiveness. They are essential for handling large datasets and complex layouts.

Table Caption

The <caption> tag provides a title for the table.

HTMLRead-only

<table>
  <caption>Student Data</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

<table>
  <caption>Student Data</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

Column Grouping (colgroup)

HTMLRead-only

<table>
  <colgroup>
    <col style="background-color: #f2f2f2">
    <col>
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

<table>
  <colgroup>
    <col style="background-color: #f2f2f2">
    <col>
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

Accessibility (scope & headers)

Use scope and headers attributes to improve accessibility for screen readers.

HTMLRead-only

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

Responsive Tables

Wrap tables in a container with overflow for better responsiveness.

HTMLRead-only

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </table>
</div>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </table>
</div>

Striped Table Styling

CSSRead-only

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Hover Effect

CSSRead-only

tr:hover {
  background-color: #ddd;
}

tr:hover {
  background-color: #ddd;
}

Sticky Header

CSSRead-only

th {
  position: sticky;
  top: 0;
  background: white;
}

th {
  position: sticky;
  top: 0;
  background: white;
}

Scrollable Table

CSSRead-only

.table-container {
  max-height: 300px;
  overflow-y: auto;
}

.table-container {
  max-height: 300px;
  overflow-y: auto;
}

Best Practices

Use captions for clarity
Ensure accessibility with scope and headers
Make tables responsive for mobile devices
Use CSS for styling instead of inline styles
Keep data simple and readable

Common Mistakes

Ignoring accessibility features
Not making tables responsive
Overloading tables with too much data
Using tables for layout instead of data

Conclusion

Advanced HTML tables enhance usability and accessibility. Proper techniques ensure tables work well across devices and for all users.

<div style="overflow-x:auto;"> <table border="1"> <caption>Sample Table</caption> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Alice</td> <td>22</td> </tr> </table> </div>

Advanced HTML Tables: Accessibility, Styling & Responsive Design

Advanced HTML Tables: Accessibility, Styling & Responsive Design

Why Advanced Tables?

Table Caption

Column Grouping (colgroup)

Accessibility (scope & headers)

Responsive Tables

Striped Table Styling

Hover Effect

Sticky Header

Scrollable Table

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

Advanced HTML Tables: Accessibility, Styling & Responsive Design

Advanced HTML Tables: Accessibility, Styling & Responsive Design

Why Advanced Tables?

Table Caption

Column Grouping (colgroup)

Accessibility (scope & headers)

Responsive Tables

Striped Table Styling

Hover Effect

Sticky Header

Scrollable Table

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?