HTML/CSS/Box Model/div table

Материал из Web эксперт
Версия от 11:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

A table but pure css

   <source lang="html4strict">

<!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"> .cell4 {

 width:100%;
 background:blue;
 float:left;
 margin:1px 0 0;

} .cell3 {

 width:75%;
 background:red;
 float:left;

} .cell2 {

 width:66%;
 background:yellow;
 float:left;

} .cell1 {

 width:50%;
 background:pink;
 float:left;

} .cell2a, .cell3a, .cell4a {

 width:100%;
 float:right;
 margin-right:-100%;
 position:relative;
 margin-left:2px;

} .cell4a {

 margin-right:-103%;
 position:relative;
 margin-left:8px;

} p {padding:2px;margin:0}

</style> </head> <body>

This is cell 4 with the most text: This is cell 4 with the most text:

This is Cell 3 : This is Cell 3 :

This is cell 2 : This is cell 2

This is cell 1 : This is cell 1 :

This is cell 4 : This is cell 4 :

This is cell 3 with the most text: This is cell 3 with the most text:

This is cell 2 : This is cell 2

This is Cell 1 : This is Cell 1 :

This is cell 4 : This is cell 4 :

This is Cell 3 : This is Cell 3 :

This is cell 2 with the most text: This is cell 2 with the most text

This is cell 1 : This is cell 1

This is cell 4 : This is cell 4 :

This is Cell 3 : This is Cell 3 :

This is cell 2 : This is cell 2

This is cell 1 with the most text: This is cell 1 with the most text

</body> </html>

</source>
   
  


Create DIV to create a table

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>

   <head>
       <title></title>
       <style type="text/css">
           div#container {
               border: thick black;
               margin: 0 20px;
               background: #aaa;
           }
           a:hover {
               background: orange;   
           }
           div#float {
               text-align: center;
               float: left;
               border: 1px solid black;
               width: 150px;
               height: 150px;
           }
           div.content {
               background: lightyellow;
               border: 1px solid black;
           }
           div#clear {
               border: 1px solid black;
               background: lightgreen;
               clear: both;   
           }
       </style>
   </head>
   <body>
               Float text. <a href="#">Link text</a>.
               Content text. <a href="#">Link text</a>. 
               Content text. <a href="#">Link text</a>.    
               Content text. <a href="#">Link text</a>. 
               Content text. <a href="#">Link text</a>.    
               Content text. <a href="#">Link text</a>. 
               Content text. <a href="#">Link text</a>.    
               Content text. <a href="#">Link text</a>. 
               Clear text. <a href="#">Link text</a>. 
               Another div.
   </body>

</html>

</source>
   
  


CSS table

   <source lang="html4strict">

<!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: #FFFFCC;
 width: 760px;
 border: 1px solid #000;

}

  • html .container {
 width: 762px;

} .header {

 width: 760px;
 border-bottom: 1px solid #000;

} .header ul {

 list-style: none

} .header ul li {

 width: 148px;
 border-left: 1px solid #000;
 float: left;
 font-weight: bold;
 padding-left: 2px;

}

  • html .header ul li {
 width: 151px;

} .data {

 width: 150px;
 float: left;
 padding-left: 2px;

}

  • html .data {
 width: 152px;

} .rowodd,.roweven {

 position: relative;
 width: 760px;
 border-top: 1px solid #000;
 background-color: #E8E8E8;

} .roweven {

 background-color: #D1DCE9;

} .clearfix:after {

 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;

} .clearfix {

 display: inline-block;

} </style> </head> <body>

  • Column 1
  • Column 2
  • Column 3
  • Column 4
  • Column 5

Company 1

A

B

C

D

0

1

s@h.ru

www.w.ru

Company 1

A

B

C

D

1

3

s@h.ru

www.w.ru

Company 1

A

B

C

D

2

0

s@h.ru

www.w.ru

</body> </html>

</source>
   
  


Gallary layout

   <source lang="html4strict">

<!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Gallery</title> <style rel="stylesheet" type="text/css"> body {

 font-size: 62.5%;
 margin: 0px;
 padding: 0px;

}

  1. content {
 margin-left: 15px;
 margin-top: 15px;
 border: 1px dashed #999;
 border-right: none;
 border-bottom: none;

} p.intro {

 font-size: 1.3em;
 line-height: normal;
 margin-bottom: 15px;

}

h1 {

 font: normal 2.4em Verdana, Arial, Helvetica, sans-serif;
 margin: 0;
 border-bottom: 1px dashed #999;
 padding: 5px 0 5px 8px;
 color: #14556b;

} p {

 font: 1.6em/160% Georgia, "Times New Roman", Times, serif;
 margin: 10px 8px;

} .copyright {

 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 1em;
 text-transform: uppercase;
 color: #666666;
 margin-left: 0px;
 padding-left: 8px;
 border-top: 1px dashed #999;
 clear: both;

} .figure {

 width: auto;
 float: left;
 width: 210px;
 margin: 0 10px 10px 10px;

} .photo img {

 border: 1px solid #666;
 background-color: #FFF;
 padding: 4px;
 position: relative;
 top: -5px;
 left:-5px;

} .figure p {

 font: 1.1em/normal Arial, Helvetica, sans-serif;
 text-align: center;
 margin: 10px 0 0 0;
 height: 5em;

} </style> </head> <body>

Gallery

this is a test. this is a test.

</body> </html>

</source>
   
  


Use DIV to create a table cell

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>

   <head>
       <style type="text/css">
           html {
               display: table;
               border-spacing: 5px;
           }
           body {
               display: table-row;
           }
           div {
               display: table-cell;
               padding: 5px;
               border: thin solid black;
           }
       </style>
       <title> HTML display property  </title>
   </head>
   <body>
table cell
table cell
   </body>

</html>

</source>
   
  


Use div to create a table layout

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>

   <head>
       <title></title>
       <style type="text/css">
           div#container {
               border: thick dotted black;
               margin: 0 20px;
               background: red;
           }
           div#float {
               text-align: center;
               float: left;
               border: 1px solid black;
               width: 150px;
               height: 150px;
           }
           div.content {
               background: lightyellow;
               border: 1px solid black;
           }
           div#clear {
               border: 1px solid black;
               background: lightgreen;
               clear: both;   
           }
       </style>
   </head>
   <body>
               Float text. 
               Content text. 
               Content text.    
               Content text.
               Content text.
               Content text.
               Content text.
               Content text.
               Clear text. 
               Another div.
   </body>

</html>

</source>