How Can I Code Css To Make Table Like?
I want to make the Tags list just like this below. I want to use CSS instead of using Table tag. How can I do this? Tags: Apple Banana Melon Strawberry Kiwi Orange Pineapple
Solution 1:
Use display:table-cell
HTML
<divclass="table"><divclass="td">tags</div><divclass="td">Apple Banana Melon Strawberry Kiwi Orange Pineapple Carrot Onion Tomato Bacon Sandwitch SoyBeans Pork Beef Chicken </div></div>
CSS
.table{display:table-row; width:350px; }
.td:first-child{width:10px; }
.td{display:table-cell; padding:10px; width:320px}
Solution 2:
You can do it like this:
HTML:
<divclass="left">
Tags:
</div><divclass="right">
Apple Banana Melon Strawberry Kiwi Orange
Pineapple Carrot Onion Tomato Bacon
Sandwitch SoyBeans Pork Beef Chicken
</div>
CSS:
.left, .right
{
color:#2B91AF;
}
.left
{
float: left;
width: 30px; //adjust this width according to your needs
margin-right: 10px; //adjust this margin according to your needs
}
.right
{
float: left;
width: 400px; //adjust this width according to your needs
}
Here is a fiddle just because it's nice: http://jsfiddle.net/VQjGW/
Solution 3:
For something like this I would advice using a Definition List. You can read a great article on this here: http://css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/
After that it should be easy enough to use css and position the elements like in your example .
Post a Comment for "How Can I Code Css To Make Table Like?"