How To Make Expandable Table

How to Create an Expandable Table

Expandable tables are a great way to save space and keep your data organized. They can be used for everything from simple lists to complex data sets. In this article, we'll show you how to create an expandable table in HTML and CSS.

HTML Markup

To create an expandable table, you'll need to use the <details> and <summary> elements. The <details> element is the container for the expandable table, and the <summary> element is the title of the table. When the user clicks on the summary, the table will expand or collapse.

```html <details> <summary>Expandable Table</summary> <table> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> </tr> <tr> <td>John Doe</td> <td>30</td> <td>Software Engineer</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Marketing Manager</td> </tr> </table> </details> ```

CSS Styling

You can use CSS to style the expandable table. The following CSS will style the table so that it is collapsed by default and only expands when the user clicks on the summary.

```css details { display: block; margin: 1em 0; padding: 1em; border: 1px solid #ccc; border-radius: 5px; } details[open] { height: auto; } summary { cursor: pointer; font-weight: bold; } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.5em; border: 1px solid #ccc; } ```

Example

Here is an example of an expandable table:

```html <!DOCTYPE html> <html> <head> <title>Expandable Table</title> <style> details { display: block; margin: 1em 0; padding: 1em; border: 1px solid #ccc; border-radius: 5px; } details[open] { height: auto; } summary { cursor: pointer; font-weight: bold; } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.5em; border: 1px solid #ccc; } </style> </head> <body> <details> <summary>Expandable Table</summary> <table> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> </tr> <tr> <td>John Doe</td> <td>30</td> <td>Software Engineer</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Marketing Manager</td> </tr> </table> </details> </body> </html> ```