HTML Code for Writing a Responsive Table in Your Blog Post

To create a responsive table in an HTML blog post, you can use the following code as a starting point:

<style> table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } @media screen and (max-width: 600px) { table { border: 0; } table caption { font-size: 1.3em; font-weight: bold; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } table td:last-child { border-bottom: 0; } } </style> <table> <caption>Sample Responsive Table</caption> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td data-label="Column 1">Data 1</td> <td data-label="Column 2">Data 2</td> <td data-label="Column 3">Data 3</td> </tr> <tr> <td data-label="Column 1">Data 4</td> <td data-label="Column 2">Data 5</td> <td data-label="Column 3">Data 6</td> </tr> </tbody> </table>  

Here's a breakdown of the code:

The CSS styles within the <style> tags define the appearance and behavior of the table. The table selector sets the width to 100% and collapses the borders between cells. The th and td selectors set padding, alignment, and border styles for table headers and cells.

The @media rule targets screens with a maximum width of 600 pixels, allowing us to define specific styles for smaller screens. In this case, it removes borders, hides the table header, and changes the table layout to a stacked format.

Inside the <table> element, you can customize the table caption and column headings within the <caption> and <thead> tags, respectively.

The table body is defined within the <tbody> tag. Each row is created with the <tr> tag, and the individual cells are defined with <td>. The data-label attribute is used to specify the column label for each cell in the responsive layout.