Hello All Friend
I am rookie for css language. I need a little help. I want to making a table with css. This table is 7 colomns and 5 rows.
i uploaded this table in my webarea (<!-- m --><a class="postlink" href="http://www.geocities.com/bogachan_turk/work.zip">http://www.geocities.com/bogachan_turk/work.zip</a><!-- m -->)
In a folder there are 200 files. And all of them use same table properties. So i wish to making table with a css.
I looked web, but i didn't find a good source or samples.
If somebody help me. I will be happy.
Take care and thanks for reading and helping
Best wishesYou can't create at table using CSS. You'd create the table using HTML, then change the way it looks using CSS. Are you looking to create a data table, or do you want to create your site's design?Here's an adapted version of something I was playing around with many moons ago.
Don't know if it is any good for you but I found it too much of a hassle once you started to add contents, especially for cross-browser, unless you kept it simple.
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<style>
body{
text-align:center;
}
.container{
width:702px;
margin-left:auto;
margin-right:auto;
border:1px solid #AD9482;
background-color:#f0f0f0;
font-size:10px;
}
.c1{
width:100px;
float:left;
text-align:left;
background-color:#e0e0e0;
border:1px solid #AD9482;
}
</style>
</HEAD>
<BODY>
<div class="container">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
</div>
</BODY>
</HTML>First of all thanks for reading and helping friend.
Last night i worked in this file and i made it
For Css
body{
margin:0;
padding:0;
font:76%/1.5em Verdana,Arial,Geneva,Helvetica,sans-serif;
text-align:center;
}
#anatablo{
width:592px;
height:313px;
margin-left:auto;
margin-right:auto;
background:#76addc;
}
#satir01_01{
float:left;
width:25px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo01.png) no-repeat top left;
}
#satir01_02{
float:left;
width:110px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo11.png);
}
#satir01_03{
float:left;
width:108px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo12.png) no-repeat top left;
}
#satir01_04{
float:left;
width:108px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo13.png) no-repeat top left;
}
#satir01_05{
float:left;
width:108px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo14.png) no-repeat top left;
}
#satir01_06{
float:left;
width:108px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo15.png) no-repeat top left;
}
#satir01_07{
float:left;
width:25px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo09.png) no-repeat top left;
}
#satir02_01{
float:left;
width:25px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo02.png) no-repeat top left;
}
#satir02_02{
float:left;
width:542px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo10.png);
}
#satir02_03{
float:left;
width:25px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo08.png) no-repeat top left;
}
#satir03_01{
float:left;
width:25px;
height:275;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo03.png);
}
#satir03_02{
float:left;
width:542px;
height:275;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
}
#satir03_03{
float:left;
width:25px;
height:275;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo07.png);
}
#satir04_01{
float:left;
width:25px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo03.png);
}
#satir04_02{
float:left;
width:542px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
}
#satir04_03{
float:left;
width:25px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo07.png) no-repeat top left;
}
#satir05_01{
float:left;
width:25px;
height:25;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo04.png) no-repeat top left;
}
#satir05_02{
float:left;
width:542px;
height:25;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo05.png);
}
#satir05_03{
float:left;
width:25px;
height:25;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo06.png) no-repeat top left;
}
and for Html file
<div id="anatablo">
<div id="satir01_01"></div>
<div id="satir01_02"></div>
<div id="satir01_03"></div>
<div id="satir01_04"></div>
<div id="satir01_05"></div>
<div id="satir01_06"></div>
<div id="satir01_07"></div>
<div id="satir02_01"></div>
<div id="satir02_02"></div>
<div id="satir02_03"></div>
<div id="satir03_01"></div>
<div id="satir03_02">Comment writing here</div>
<div id="satir03_03"></div>
<div id="satir04_01"></div>
<div id="satir04_02"></div>
<div id="satir04_03"></div>
<div id="satir05_01"></div>
<div id="satir05_02"></div>
<div id="satir05_03"></div>
</div>
but there is a problem and i can not solve this.
I want to give a Link for "satir01_02" how can i do? I can not give a link because "tablo02.png" file is a backgroud!
What can i do friends?
And i hope, i can help you how can making a table with css. For this reason i wrote all codesand how can i add shadow for "satir2_02" in css? I search some samples in web. But i didn't find a good and correct code.
I wrote
text-shadow:blue;
but it is not working :-(text-shadow:blue; is not valid CSS. Just use images instead..You could add
onclick="location='yourpage.htm'"
to the div
I am rookie for css language. I need a little help. I want to making a table with css. This table is 7 colomns and 5 rows.
i uploaded this table in my webarea (<!-- m --><a class="postlink" href="http://www.geocities.com/bogachan_turk/work.zip">http://www.geocities.com/bogachan_turk/work.zip</a><!-- m -->)
In a folder there are 200 files. And all of them use same table properties. So i wish to making table with a css.
I looked web, but i didn't find a good source or samples.
If somebody help me. I will be happy.
Take care and thanks for reading and helping
Best wishesYou can't create at table using CSS. You'd create the table using HTML, then change the way it looks using CSS. Are you looking to create a data table, or do you want to create your site's design?Here's an adapted version of something I was playing around with many moons ago.
Don't know if it is any good for you but I found it too much of a hassle once you started to add contents, especially for cross-browser, unless you kept it simple.
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<style>
body{
text-align:center;
}
.container{
width:702px;
margin-left:auto;
margin-right:auto;
border:1px solid #AD9482;
background-color:#f0f0f0;
font-size:10px;
}
.c1{
width:100px;
float:left;
text-align:left;
background-color:#e0e0e0;
border:1px solid #AD9482;
}
</style>
</HEAD>
<BODY>
<div class="container">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<br style="clear:both">
</div>
</BODY>
</HTML>First of all thanks for reading and helping friend.
Last night i worked in this file and i made it
For Css
body{
margin:0;
padding:0;
font:76%/1.5em Verdana,Arial,Geneva,Helvetica,sans-serif;
text-align:center;
}
#anatablo{
width:592px;
height:313px;
margin-left:auto;
margin-right:auto;
background:#76addc;
}
#satir01_01{
float:left;
width:25px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo01.png) no-repeat top left;
}
#satir01_02{
float:left;
width:110px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo11.png);
}
#satir01_03{
float:left;
width:108px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo12.png) no-repeat top left;
}
#satir01_04{
float:left;
width:108px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo13.png) no-repeat top left;
}
#satir01_05{
float:left;
width:108px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo14.png) no-repeat top left;
}
#satir01_06{
float:left;
width:108px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo15.png) no-repeat top left;
}
#satir01_07{
float:left;
width:25px;
height:35;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo09.png) no-repeat top left;
}
#satir02_01{
float:left;
width:25px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo02.png) no-repeat top left;
}
#satir02_02{
float:left;
width:542px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo10.png);
}
#satir02_03{
float:left;
width:25px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo08.png) no-repeat top left;
}
#satir03_01{
float:left;
width:25px;
height:275;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo03.png);
}
#satir03_02{
float:left;
width:542px;
height:275;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
}
#satir03_03{
float:left;
width:25px;
height:275;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo07.png);
}
#satir04_01{
float:left;
width:25px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo03.png);
}
#satir04_02{
float:left;
width:542px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
}
#satir04_03{
float:left;
width:25px;
height:20;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo07.png) no-repeat top left;
}
#satir05_01{
float:left;
width:25px;
height:25;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo04.png) no-repeat top left;
}
#satir05_02{
float:left;
width:542px;
height:25;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background-image:url(resimler/tablo05.png);
}
#satir05_03{
float:left;
width:25px;
height:25;
margin:0;
margin-right:0;
padding:0;
background:#76addc;
background: url(resimler/tablo06.png) no-repeat top left;
}
and for Html file
<div id="anatablo">
<div id="satir01_01"></div>
<div id="satir01_02"></div>
<div id="satir01_03"></div>
<div id="satir01_04"></div>
<div id="satir01_05"></div>
<div id="satir01_06"></div>
<div id="satir01_07"></div>
<div id="satir02_01"></div>
<div id="satir02_02"></div>
<div id="satir02_03"></div>
<div id="satir03_01"></div>
<div id="satir03_02">Comment writing here</div>
<div id="satir03_03"></div>
<div id="satir04_01"></div>
<div id="satir04_02"></div>
<div id="satir04_03"></div>
<div id="satir05_01"></div>
<div id="satir05_02"></div>
<div id="satir05_03"></div>
</div>
but there is a problem and i can not solve this.
I want to give a Link for "satir01_02" how can i do? I can not give a link because "tablo02.png" file is a backgroud!
What can i do friends?
And i hope, i can help you how can making a table with css. For this reason i wrote all codesand how can i add shadow for "satir2_02" in css? I search some samples in web. But i didn't find a good and correct code.
I wrote
text-shadow:blue;
but it is not working :-(text-shadow:blue; is not valid CSS. Just use images instead..You could add
onclick="location='yourpage.htm'"
to the div