How can CSS be used to format a form layout instead of using tables?

Using CSS to format a form layout instead of tables involves using CSS properties like display, float, margin, padding, and positioning to create a visually appealing and responsive design. This approach allows for more flexibility and control over the form layout compared to using tables. ```html <!DOCTYPE html> <html> <head> <style> .form-container { display: flex; flex-direction: column; max-width: 400px; margin: 0 auto; } .form-group { margin-bottom: 10px; } .form-group label { font-weight: bold; } .form-group input { padding: 5px; width: 100%; } .form-group button { padding: 5px 10px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } </style> </head> <body> <div class="form-container"> <div class="form-group"> <label for="name">Name:</label> <input type="text" id="name" name="name"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" id="email" name="email"> </div> <div class="form-group"> <button type="submit">Submit</button> </div> </div> </body> </html> ```

Keywords

CSS form layout tables formatting PHP

Related Questions