How to Create a table using CSS ?

Marc0 · Aug 16, 2012

I want to make a table only using css tag as <div> <ul>..is It possible ?
any tutorials to make this ?

Thanks

webdesign · Aug 16, 2012

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 · Aug 21, 2012

A simple table definition would be:

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

madelinekim · Sep 12, 2012

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 · Dec 17, 2012

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 · Dec 23, 2012

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 · Oct 28, 2017

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 · Nov 1, 2017

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.

How to Create a table using CSS ?

Marc0

Well-known member

webdesign

Well-known member

sunitha

Member

madelinekim

Member

aixporter

Member

web3k

Member

ClintAnthony

New member

24x7serverman

Well-known member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud