How to Make Responsive Tables in HTML Websites and Blogger

Tables are the best way to demonstrate some contents of the article. They helps to make the article very professional and catchy. We have provided awesome ideas to make tables in your websites with CSS and HTML codes.

An HTML table is defined with the <table> tag.

Row of the table is defined by <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with <td> tag.

Insert Table in Websites:

1. First of all, write <table> tag to make table in website and close it by </table> tag. You can also write <table style="width:100%"> to make table more responsive.
2. Then, write <tr> tag for row and end with it </tr>. Each row should have this tag. This is our first row. So, to make it head row write <th>title name1</th>, <th>title name2</th>.
3. Again, write <tr> tag and from second row use <td> tag which defines data/cell of a table.
4. In this way you can expand title row names, and the table is very responsive. As the length of you text increse it will automatically manage from its own.
5. CSS also can be added to make the table more attractive. I have given its code below.

HTML Code to make tables:

<table> <tbody> <tr> <th>S.N.</th> <th>Class</th> <th>Roll Number</th> </tr> <tr> <td>1</td> <td>Seven</td> <td>2</td> </tr> <tr> <td>2</td> <td>Nine</td> <td>4</td> </tr> </tbody> </table>

CSS Code to make tables:

table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }

Result of table:

S.N.	Class	Roll Number
1	Seven	2
2	Nine	4

You can change the color of tables by editing the CSS code given above.