CSS - Could this be created with CSS rather than <table>?

Question

I am creating a website based on a designers photoshop mock-ups.

Mock-up

Here is a part of a question form. I know this could be created with a HTML table fairly easily, but as tables are supposed to be used for data, I would rather use CSS.

I am trying to work out if this could be created with 3 separate columns, one for the radio buttons, another for the titles, and the other for the text boxes, but I am unsure how to get the features to line up ("Account" radio box to line up with "Name" and its text box).

Should this be done with CSS or table?

can you provide a screenshot as to how you want it to look? I realise it's 3 columns, but still... Help us help you. — seemly
– seemly, Commented Dec 27, 2013 at 13:51
@seemly oops took one, but forgot to attach. I have added the link to the post. — MRC
– MRC, Commented Dec 27, 2013 at 14:03

NoobEditor · Accepted Answer · 2013-12-27 14:31:20Z

4

You can use

display:table; for <table>
display:table-row; for <tr>
display:table-cell; for <td> in div format

here is a demo (it has css table vs html table-compare for your understanding)

CSS to play with

body{
     height:100%;
}
#main{
    height:100%;
    width:100%;

}
.table{
    display:table;
    width: 100%;
}
.tr{
    display:table-row;
}
.td{
    display:table-cell;
}

EDIT

Based on your image, you will need a layout something like this demo

CSS

body {
    height:100%;
}
#main {
    height:100%;
    width:100%;
}
.table {
    display:table;
    width: 100%;
}
.tr {
    display:table-row;
}
.td {
    display:table-cell;
}
.td > span {
    display:list-item;
    list-style:none;
}
.td3 >span {
    background:grey;
    height:16px;
    font-size:10px;
}

HTML

<div id="main">
    <div class="table">
        <div class="tr">
            <div class="td td1"> <span>Project </span>  <span>Account</span>  <span>General bsns</span> 
            </div>
            <!-- //td -->
            <div class="td td2"> <span>Ref</span>  <span>Tite</span>  <span>Name</span> 
            </div>
            <!-- //td -->
            <div class="td td3"> <span>Insert Project Ref</span>  <span>Insert Project Title</span>  <span>Insert Account Nama</span> 
            </div>
            <!-- //td -->
        </div>
        <!-- //tr -->
    </div>
</div>

edited Dec 27, 2013 at 14:31

answered Dec 27, 2013 at 13:47

NoobEditor

16k20 gold badges85 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MRC Over a year ago

Thanks again NoobEditor. I think you may have helped me with something similar before. I just couldn't get my head around it this time, but I will be sure to learn it! Thanks!

MRC Over a year ago

Should be fine. I will have a play and shouldn't be hard to make it look like this: imgur.com/mfyxXe9

NoobEditor Over a year ago

definitely, just set parent divs and html height:100%...and you'll have these design with ease!! :)

Collectives™ on Stack Overflow

CSS - Could this be created with CSS rather than <table>?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related