How can the use of HTML tables for layout be replaced with modern HTML and CSS techniques for better presentation and responsiveness?
Using HTML tables for layout is outdated and can lead to issues with responsiveness and accessibility. To replace this, modern HTML and CSS techniques like using flexbox or grid layouts can be used to create more flexible and responsive designs. By separating content from presentation, it allows for better control over the layout and styling of the webpage. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern Layout Example</title> <style> .container { display: flex; flex-wrap: wrap; } .item { flex: 1 1 200px; margin: 10px; padding: 10px; background-color: #f2f2f2; border: 1px solid #ccc; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> </body> </html> ```