131 lines
2.6 KiB
HTML
131 lines
2.6 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<title>Css Table</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||
|
|
<style type="text/css">
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
background-color: #998FCC;
|
||
|
|
width: 800px;
|
||
|
|
border: 1px solid gray;
|
||
|
|
}
|
||
|
|
|
||
|
|
* html .container {
|
||
|
|
width: 820px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
width: 800px;
|
||
|
|
border-bottom: 1px solid blue;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header ul {
|
||
|
|
list-style: none
|
||
|
|
}
|
||
|
|
|
||
|
|
.header ul li {
|
||
|
|
width: 160px;
|
||
|
|
border-left: 1px solid red;
|
||
|
|
float: left;
|
||
|
|
font-weight: bold;
|
||
|
|
padding-left: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
* html .header ul li {
|
||
|
|
width: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data {
|
||
|
|
width: 180px;
|
||
|
|
float: left;
|
||
|
|
padding-left: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
* html .data {
|
||
|
|
width: 182px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rowodd,.roweven {
|
||
|
|
position: relative;
|
||
|
|
width: 800px;
|
||
|
|
border-top: 1px solid #000;
|
||
|
|
background-color: pink;
|
||
|
|
}
|
||
|
|
|
||
|
|
.roweven {
|
||
|
|
background-color: #f79455;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clearfix:after {
|
||
|
|
content: ".";
|
||
|
|
display: block;
|
||
|
|
height: 0;
|
||
|
|
clear: both;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clearfix {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container clearfix">
|
||
|
|
<div class="header clearfix">
|
||
|
|
<ul>
|
||
|
|
<li>Column 1</li>
|
||
|
|
<li>Column 2</li>
|
||
|
|
<li>Column 3</li>
|
||
|
|
<li>Column 4</li>
|
||
|
|
<li>Column 5</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="rowodd clearfix">
|
||
|
|
<div class="data">
|
||
|
|
<p>Company 1</p>
|
||
|
|
<p>happycodings1</p>
|
||
|
|
<p>happycodings2</p>
|
||
|
|
<p>happycodings3</p>
|
||
|
|
<p>happycodings4</p>
|
||
|
|
</div>
|
||
|
|
<div class="data"><p>www.happycodings.com</p></div>
|
||
|
|
<div class="data"><p>www.happycodings.com</p></div>
|
||
|
|
<div class="data"><p>www.happycodings.com</p></div>
|
||
|
|
<div class="data"><p>www.happycodings.com</p></div>
|
||
|
|
</div>
|
||
|
|
<div class="roweven clearfix">
|
||
|
|
<div class="data">
|
||
|
|
<p>Company 1</p>
|
||
|
|
<p>code example</p>
|
||
|
|
<p>code example</p>
|
||
|
|
<p>code example</p>
|
||
|
|
<p>code example</p>
|
||
|
|
</div>
|
||
|
|
<div class="data"><p>java</p></div>
|
||
|
|
<div class="data"><p>php</p></div>
|
||
|
|
<div class="data"><p>android</p></div>
|
||
|
|
<div class="data"><p>c++</p></div>
|
||
|
|
</div>
|
||
|
|
<div class="rowodd clearfix">
|
||
|
|
<div class="data">
|
||
|
|
<p>Company 1</p>
|
||
|
|
<p>happy</p>
|
||
|
|
<p>happy</p>
|
||
|
|
<p>happy</p>
|
||
|
|
<p>happy</p>
|
||
|
|
</div>
|
||
|
|
<div class="data"><p>codes</p></div>
|
||
|
|
<div class="data"><p>codes</p></div>
|
||
|
|
<div class="data"><p>codes</p></div>
|
||
|
|
<div class="data"><p>codes</p></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|