Table grid with css

Post Reply
User avatar
parthasarker
Insanely Distorted
Insanely Distorted
Posts: 2369
Joined: Mon Dec 01, 2008 5:17 pm
Full Name: Partha Sarker
Expertise: Web Design

Hello Friends,

We always use table for grid at html pages. Recently I was working on a page where I needed a grid with three column and 5 rows.. where I had to use <ul>, <li> and <div> for designing...

Image

I completed the project with the following way.. I hope it is OK and will help someone for this type solutions...

HTML page code
---------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test grid design</title>
<style type="text/css">
<!--
@import url("main.css");
-->
</style>
</head>
<body>
<div id="left">
<ul id="pages">
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
</ul>
</div>
</body>
</html>
----------------------------------------------

CSS style code
-----------------------------------------------
#left{
width:460px;
}
#left #pages{
padding:0px;
margin:0px;
list-style:none;
}
#left #pages li{
padding:0;
margin:0;
text-align:left;
margin-bottom:1px;
}
#left #pages div{
float:left;
width:140px;
padding:0 5px;
border:1px solid #cccccc;
height:25px;
line-height:25px;
background-color:#f5f5f5;
color:#000000;
text-decoration:none;
}
---------------------------------------

I just sharing my knowledge and findings, though I know many of you completed this type solution before.

Thanks


User avatar
pagol
Insanely Distorted
Insanely Distorted
Posts: 3298
Joined: Sat Nov 03, 2007 8:41 pm
Full Name: Koba
Expertise: Jack of all, master of NONE
x 81

thanks parthasarker .... onek e ata kajey lagbey... asha kori
** KISS Principle **
User avatar
Tashlima
Posts: 399
Joined: Thu Oct 18, 2007 6:55 pm
Full Name: Tashlima Kabir
Expertise: Graphic Design

hey this one is simple and easier .. long time ago i also made such table using CSS but dont remember how .. anyways thanks for sharing.
User avatar
asifshahid
Insanely Distorted
Insanely Distorted
Posts: 4329
Joined: Tue Oct 16, 2007 2:35 pm
Full Name: Asif Shahid
x 37

amar moto manusher kaje lagbe :D thanks partha bhai....
Asif Shahid
Sydney, Australia 🇦🇺
User avatar
sweetafroza
Proud Member
Proud Member
Posts: 1979
Joined: Fri Jun 27, 2008 8:30 pm
Full Name: Luthfunnahar Hussain
Expertise: Web Design

thanks partha bhai... eta amaroo kaje lagbe.. ----
:)
User avatar
sislamrony
Posts: 310
Joined: Wed Jan 28, 2009 8:01 pm
Full Name: Shamsul Islam Rony
Expertise: Broadcast Graphics

Bojhar Onek chesta korlam.10% bujhte parchi.Baki 90% DD te member thaika bujhte hobe.
User avatar
sweetafroza
Proud Member
Proud Member
Posts: 1979
Joined: Fri Jun 27, 2008 8:30 pm
Full Name: Luthfunnahar Hussain
Expertise: Web Design

hehehehehe... :) try kore jan rony bhai... its very simple :p
:)
User avatar
sislamrony
Posts: 310
Joined: Wed Jan 28, 2009 8:01 pm
Full Name: Shamsul Islam Rony
Expertise: Broadcast Graphics

Sobkichu ki r akdin a hoi apa. Man is mortal-Manush matro vul hoi.Tai onekdin lage.he he he
User avatar
mony
DD Addict
DD Addict
Posts: 587
Joined: Fri Nov 28, 2008 7:00 am

css er oi deep e khokhono think kori nai... ar proyozon o pore nai..shotti bolte... peye balo laglo.....:D
tnx..partha da
want to learn something.
----------------------------
still move
Post Reply

Return to “CSS”