7
\$\begingroup\$

I want to make a form which looks like this:

     Column A      Column B
1   Textbox AA    Textbox BB
2   Textbox AA    Textbox BB

I've coded it like this:

             <form id="deps" name="deps" action="" method="POST">  
                 <ul>
                    <li>
                    <span class="er">&nbsp;</span>
                    </li> <br />

                    <li>
                    <div class="field">&nbsp;</div>
                    <div class="field cv"><label for="met">A</label>  </div>
                    <div class="field cv"><label for="eng">B</label> </div>  
                    </li> <br />

                    <li>
                    <div class="field head"> <label for="bd">1</label> </div>
                    <div class="field"><input type="text" name="bdmm" id="bdmm" /> <label for="bdmm">M</label> </div>
                    <div class="field"><input type="text" name="bdinch" id="bdinch" /> <label for="bdinch">I</label> </div>
                    </li> <br />

                    <li> 
                    <div class="field head"> <label for="sd">2</label> </div>
                    <div class="field"><input type="text" name="sdmm" id="sdmm" /> <label for="sdmm">M</label> </div>
                    <div class="field"><input type="text" name="sdinch" id="sdinch" /> <label for="sdinch">I</label> </div>
                    </li>  <br />

                    <li> 
                    <div class="field head"><label for="tw">TW</label>  </div>
                    <div class="field"><input type="text" name="twkg" id="twkg" /> <label for="twkg">KG</label> </div> 
                    <div class="field"><input type="text" name="twlbs" id="twlbs" /> <label for="twlbs">LBS</label></div>
                    </li>  <br />
                </ul>
                    <input type="submit" value="Calculate" onclick="getText();" />  
              </form> 

CSS:

form{
    padding:3px 0;
    font-family: Georgia, arial, serif;
}

ul {
    list-style: none;
}

ul li {
    clear:both;
    margin:0px;
    padding:2px 0px;
    vertical-align: middle;
}

input{  
    font-size: 1em;
    margin: 5px;
    padding: 5px 8px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    width: 100px; 
    }  

input:focus {  
    border: solid 1px #8CDED7;  
    }  

label {  
    margin: 2px;
    padding: 2px;  
    text-align: right;
    font-size: 1em; 
    text-shadow: 0px 1px 0px #e5e5ee;
    display: inline-block;

    }  

label, input, h4 {
    letter-spacing: 1.5px;
    line-height: 20px; 
    font-family: Georgia, 'Times New Roman';
    text-transform: uppercase;
}

.field {
    float: left;
    display:inline-block;
    width:  200px;
    vertical-align: middle;
}
.head {
    padding-top: 5px;
}

.er {
    font-size: 1em;
    margin-right: 10px;
    padding: 8px; 
    background: #CC0000;
    color: #F7F7F7;
    float:right;
}   

.cv {
    float: left;
}   
input[type=submit]{
    margin-top: 35px;
    padding: 9px;
    width: auto;
    text-align: center;
    cursor:pointer;
    font-family:  Georgia, arial, serif;
    font-size: 1em;
    color: #565463;
    background: #8CDED7;
    border: 2px solid #8CDED7;
    text-shadow: 0px 1px 0px #e5e5ee;
}

This works fine as I want: http://jsfiddle.net/4kWdQ/. But I would like to know, if putting a div in an unordered list is good practice or not? And anyway I can improve the CSS code?

\$\endgroup\$
12
\$\begingroup\$

Divs of any kind are a bit of a "lesser evil" -- they carry no semantic info, and should be used only when (1) you need an element there and (2) there's no semantic equivalent.

In this case, you do have a semantic equivalent. You have rows, columns, headers...data that must be arranged in those rows/columns and have those headers or it doesn't make sense...what you have here is a bona fide table. And it should be coded as one, rather than as a list of divs. ("Tables bad, CSS good" applies to layout tables, not tables in general. If you have tabular data, putting it in a table just makes sense.)

\$\endgroup\$
  • \$\begingroup\$ Thanks for the feedback. I thought so, I would use a table, but wasn't sure it would apply here for some odd reason. \$\endgroup\$ – input Oct 29 '11 at 21:14
  • 1
    \$\begingroup\$ Like any other tag, <table> should only be used where it is semantically appropriate. In this case, the data is tabular, so it's absolutely appropriate! \$\endgroup\$ – Marnen Laibow-Koser Nov 2 '11 at 14:54
  • 4
    \$\begingroup\$ Sadly, tables have gotten such a bad rap the past few years that so many folks don't immediately think of it when it is actually needed! Good question and good answer! (sadly, a table had not come to mind when I reviewed the code). \$\endgroup\$ – Kyle Hayes Nov 4 '11 at 1:39
4
\$\begingroup\$

And to add to cHao's comment, also using the table for your purpose will help in providing a construct that will give you some predefined spacing or cells to work with that you can add padding/marging via css classes instead of having to add extraneous tags like <br />

A goal I try to set is to have the least or optimal html markup possible so it's clean and to have the css define the look and feel. Hope this helps.

\$\endgroup\$
  • \$\begingroup\$ It should also be noted that having <br /> elements between the <li> elements is invalid HTML. The only child element allowed for <ul> is <li>. \$\endgroup\$ – cimmanon Oct 1 '14 at 17:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.