How to Create a table using CSS ?

Marc0

Well-known member
Registered
Joined
Jun 6, 2012
Messages
890
Points
28
I want to make a table only using css tag as <div> <ul>..is It possible ?
any tutorials to make this ?

Thanks
 

webdesign

Well-known member
Joined
Jul 5, 2012
Messages
120
Points
0
Here's Example as refereces
<h4>Test Create Table with Css</h4>

<div class=”table”>
<ul>
<li class=”title”>Rank</li>
<li class=”even”>1</li>
<li class=”odd”>2</li>
<li class=”even”>3</li>
<li class=”odd”>4</li>
<li class=”even”>5</li>
</ul>
<ul>
<li class=”title”>Team</li>
<li class=”even”>Australia</li>
<li class=”odd”>South Africa</li>
<li class=”even”>India</li>
<li class=”odd”>Srilanka</li>
<li class=”even”>Pakistan</li>
</ul>
<ul>
<li class=”title”> Points</li>
<li class=”even”>5361</li>
<li class=”odd”>5360</li>
<li class=”even”>5498</li>
<li class=”odd”>3680</li>
<li class=”even”>2197</li>
</ul>
<ul>
<li class=”title”>Rating</li>
<li class=”even”>128</li>
<li class=”odd”>119</li>
<li class=”even”>117</li>
<li class=”odd”>108</li>
<li class=”even”>100</li>
</ul>
</div>
CSS code:
<style type=”text/css”>
.table{
background:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.table ul{
float:left;
margin:0;
padding:0;
border:1px solid #C9C9C9;
}
.table ul li{
list-style:none;
padding:5px 10px;
}
.table ul li.title{
font-weight:bold;
background:#333;
color:#fff;
}
.table ul li.even{
background:#fff
}
.table ul li.odd{
background:#D7EDFB
}
h1{font-size:16px;
color:#227786;
}
</style>
 

sunitha

Member
Registered
Joined
Aug 21, 2012
Messages
17
Points
0
A simple table definition would be:

table.main {
border: 5px solid double;
border-color: #006400;
}
 

madelinekim

Member
Registered
Joined
Aug 8, 2012
Messages
26
Points
0
CSS is often used by lots of web developers with the help of table based design to mange the tables properties and some other things in yoour web pages. Because we know that without CSS tablesless design is possible.
 

aixporter

Member
Registered
Joined
Dec 12, 2012
Messages
51
Points
0
Believe it or not, tables are still actively used in HTML5.. with large data sets there simply isn't anything better than tables. Especially if you think about exporting data to CSV files.
 

web3k

Member
Registered
Joined
Dec 23, 2012
Messages
29
Points
0
You can use multiple div's inside a div container. Float left all the divs.

This only works easily when you have a fixed width on the container and divs inside, but can be done.

If the content going into the table is tabular type data, then use tables. That's what they were designed for.
 

ClintAnthony

New member
Registered
Joined
Oct 28, 2017
Messages
9
Points
0
Is it really necessary for you to create a table using CSS? because your just making things difficult, why not use HTML

Code:
<table>
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

That will give you a table with three columns and two rows. Why bother using CSS when you can do it in HTML, and CSS is for designing the page, not for mark up.
 

24x7serverman

Well-known member
Hosting Provider
Registered
Joined
Jul 25, 2017
Messages
651
Points
28
Please note, you HTML is the language which you will need to use for designing, you can use CSS for it. You will need to use <table>, <td? , <tr> tags while designing the table in the HTML. The structure will be as below -

<table>
<tr>
<td>
</td>
</tr>
</table>

tr tag is for table row and td is for the table data. You can define the contents as per your requirement.
 
Older Threads
Replies
4
Views
12,551
Replies
1
Views
11,348
Replies
3
Views
11,609
Replies
0
Views
118,070
Newer Threads
Replies
2
Views
3,696
Replies
1
Views
2,462
Replies
1
Views
2,878
Replies
3
Views
2,707
Replies
5
Views
5,426
Latest Threads
Replies
0
Views
99
Replies
0
Views
61
Replies
0
Views
51
Replies
1
Views
82
Recommended Threads

Latest postsNew threads

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top