Amateur sites don't customize tables on their pages because the skills and knowledge of their devs don't allow them to. Here are some examples of how tables give our sites a more professional look. ### <br>Table without styling   ### <br>With basic styling  Using tables on websites can be very useful for displaying data in an organized and readable way. Here are some tricks and good practices for using tables on your sites: 1. The basic structure of an HTML table is as follows ```html <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </tbody> </table> ``` 2. To make your tables more attractive, you can use CSS ```css table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; border: 1px solid #ddd; text-align: left; } th { background-color: #f4f4f4; } tr:nth-child(even) { background-color: #f9f9f9; } tr:hover { background-color: #f1f1f1; } ``` 3. To make your tables more accessible: + Use the **scope** property on **<th>** to define the scope of header cells ```html <th scope="col">Header 1</th> <th scope="row">Data 1</th> ``` + Use additional descriptions for complex tables with the **aria-describedby** attribute and **<caption>** elements: ```html <table aria-describedby="tableDescription"> <caption id="tableDescription">Table description</caption> <!-- table structure --> </table> ``` 4. You can add interactivity to tables using JavaScript, such as sorting, filtering and pagination. Here's a basic example of how to sort columns in a table ```js <script> function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.rows; for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } </script> ``` The HTML structure of the table must include an **onclick** attribute to call the **sortTable** function ```html <table id="myTable"> <thead> <tr> <th onclick="sortTable(0)">Header 1</th> <th onclick="sortTable(1)">Header 2</th> <th onclick="sortTable(2)">Header 3</th> </tr> </thead> <tbody> <!-- rows --> </tbody> </table> ``` Use these techniques to insert tables into your sites and make them look more professional and attract your audience and potential customers. Feel free to leave your questions in the comments and I'll be here to answer them. Apply this simple table, style it with **CSS** and show here what results you got <br><table> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>New York</td> </tr> <tr> <td>Mary</td> <td>30</td> <td>Los Angeles</td> </tr> <tr> <td>Peter</td> <td>35</td> <td>Chicago</td> </tr> </tbody> </table>