In this lesson, you'll learn how to make your HTML tables adapt to the size of the viewport using only HTML attributes. Although advanced responsiveness (like horizontal scrolling or reflowing of columns) typically requires CSS, you can improve table adaptability by using the width attribute in HTML.

What Are Responsive Tables in HTML?

Responsive tables adjust their width to fit the screen or container they are placed in. This helps ensure that all table data is visible on various devices. Without CSS, one of the simplest ways to achieve a responsive-like behavior is to set the table's width to 100% so that it uses the entire available width.

Syntax for a Responsive Table (HTML Only)

You can set the table’s width to 100% using the width attribute. Here's the basic syntax:

<table border="1" width="100%">
  <!-- Table rows and cells go here -->
</table>

• border="1": Adds a simple border around the table and its cells for better visibility.
• width="100%": Makes the table span 100% of its container's width, helping it adjust to different screen sizes.

Example: Responsive Sales Report Table

Below is a complete HTML example that uses only HTML attributes to create a responsive table. The table is set to fill the available width, making it more adaptable to different devices.

Explanation

• width="100%":
  The table will span the full width of its parent container or viewport, ensuring it adapts to various screen sizes.

• border="1":
  This attribute provides a visible border around the table and its cells, making the table structure clear without additional styling.

• Structure:
  The table includes a header row with <th> tags and several data rows with <td> tags. Because the table’s width is set to 100%, the table adjusts its size on different devices, ensuring that all data remains visible.

While advanced responsive table designs typically require CSS, setting the table width to 100% is a simple, HTML-only method to enhance adaptability. Experiment with this approach to see how it works with your content on different devices!