HTML/CSS/Box Model/div table
Содержание
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;
}
- 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.
Figure 1:
Figure 2: .
Figure 3:
Figure 4:
Figure 5: this is a test.
Figure 6: .
Copyright 2006
</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>
</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>