Menu
Alright, I'm trying to buy into the idea that html tables should not be used, and that divs should be. However, I often have code that resembles the following
<table> <tr> <td>First Name:</td> <td colspan="2"><input id="txtFirstName"/></td> </tr> <tr> <td>Last Name:</td> <td colspan="2"><input type="text" id="txtLastName"/></td> </tr> <tr> <td>Address:</td> <td> <select type="text" id="ddlState"> <option value="NY">NY</option> <option value="CA">CA</option> </select> </td> <td> <select type="text" id="ddlCountry"> <option value="NY">USA</option> <option value="CA">CAN</option> </select> </td> </tr> </table> I want the labels to be aligned and I want the controls to be aligned. How would I do this without using tables?
708
So, when creating a table, all you need to do is, instead of the HTML 'table' tag, merely use the 'div' tag and add the corresponding CSS to display a table. Here's an example to walk you through the process of creating a table.
To make DIVs behave like TABLEs, you have to tell them to behave that way using the display property. The three key values that we'll be using are table , table-row and table-cell . Each element now behaves like it were part of a table. In doing so, it also inherits cell capabilities.
Using div is better than using table because of easy control of the in the design and it can be container for controls than table and the table is mainlt used to group data with simillar structure so it's design is for this task but div is considered as container mainly than table.
The table element is still the correct way to provide tabular data in a semantically correct way in HTML. So if you use it semantically correct it is fine and not outdated per se.
This ought to do the trick.
<style> div.block{ overflow:hidden; } div.block label{ width:160px; display:block; float:left; text-align:left; } div.block .input{ margin-left:4px; float:left; } </style> <div class="block"> <label>First field</label> <input class="input" type="text" id="txtFirstName"/> </div> <div class="block"> <label>Second field</label> <input class="input" type="text" id="txtLastName"/> </div> I hope you get the concept.
54
answered Sep 25 '22 02:09
Please be aware that although tables are discouraged as a primary means of page layout, they still have their place. Tables can and should be used when and where appropriate and until some of the more popular browsers (ahem, IE, ahem) become more standards compliant, tables are sometimes the best route to a solution.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
