HTML/CSS/Table Style/table

Материал из Web эксперт
Перейти к: навигация, поиск

A simple XHTML table

   <source lang="html4strict">

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

  <head>
     <title>A simple XHTML table</title>
  </head>
  <body>
<thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
Price of Fruit
Fruit Price
Apple $0.25
Orange $0.50
Banana $1.00
Pineapple $2.00
Total $3.75
  </body>

</html>

</source>
   
  


A table with auto width only expands enough to accomodate its content

   <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> table with auto width </title>
       <style type="text/css" media="all">
           table {
             width: auto;
             border: thin solid black;
           }
       </style>
   </head>
   <body>
           A table with auto width only expands enough to accomodate its content.
   </body>

</html>

</source>
   
  


basic table

   <source lang="html4strict">

<?xml version"1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

 <head>
   <title>A Basic Table</title>
 </head>
 <body>
Pizza Type Small Medium Large
Thin Crust 3.99 4.99 6.99
Deep Dish 4.99 6.99 8.99
Stuffed Crust 5.99 7.99 9.99
 </body>

</html>

</source>
   
  


Basic table with tr, td

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Basic Table 1</title> </head> <body>

N P
P O
V B
L L
E P

</body> </html>

</source>
   
  


Calendar 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 xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> table {

width: 100%;
border-collapse: collapse;

}

  1. year {
font-family: monospace;
font-size: 1.5em;
padding: 0;
margin: 0;

}

  1. month {
font-family: monospace;
font-size: 2em;
padding: 0;
margin: 0;

}

  1. days {
background-color: #00B3FF;
color: white;
font-family: monospace;
width: 75px;

} .date {

border-right: 1px solid black;
border-bottom: 1px solid black;
font-family: monospace;
text-decoration: none;
float: left;
width: 1.5em;
height: 1.5em;
background-color: white;
text-align: center;

} .addevent {

display: block;
float: left;
width: 1em;
height: 1em;
text-align: center;
background-color: #666;
color: white;
font-weight: bold;
text-decoration: none;

} .event {

padding-left: 1em;
padding-bottom: .75em;

} td {

width: 14%;
background-color: #ccc;
border: 1px solid white;
vertical-align: top;

} .weekend {

background-color: #999;

} .emptydate {

border-right: 1px solid #666;
border-bottom: 1px solid #666;
font-family: monospace;
float: left;
width: 1.5em;
height: 1.5em;

}

  1. today {
border: 2px solid black;

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

<a href=""><</a> 2000 <a href="">></a>
<a href=""><</a> October <a href="">></a>
SundayMondayTuesdayWednesdayThursdayFridaySaturday
         <a href="1.html" class="date">1</a> <a href="add.html" class="addevent">+</a>
         <a href="2.html" class="date">2</a> <a href="add.html" class="addevent">+</a>
<a href="" class="event">Event 1</a>
         <a href="3.html" class="date">3</a> <a href="add.html" class="addevent">+</a>
         <a href="4.html" class="date">4</a> <a href="add.html" class="addevent">+</a>
         <a href="5.html" class="date">5</a> <a href="add.html" class="addevent">+</a>
<a href="" class="event">Event 2</a>
         <a href="6.html" class="date">6</a> <a href="add.html" class="addevent">+</a>
         <a href="7.html" class="date">7</a> <a href="add.html" class="addevent">+</a>
<a href="" class="event">Event 4</a>
         <a href="29.html" class="date">29</a> <a href="add.html" class="addevent">+</a>
Event 5
         <a href="30.html" class="date">30</a> <a href="add.html" class="addevent">+</a>
<a href="" class="event">Event 6</a>
         <a href="31.html" class="date">31</a> <a href="add.html" class="addevent">+</a>
<a href="" class="event">Event 7</a> <a href="31.html?id=2" class="event">Event 8</a>
          
          
          
          

</body> </html>

</source>
   
  


Fixed table first column

   <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>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body {margin:0;padding:0}

  1. container {width:605px}

table#name {

 width:100px;
 background:#ffffcc;
 float:left;

} table#data {

 background:#ffffcc;
 width:900px;  

} td {

 border:1px solid red;

}

  1. data td {width:100px;}
  2. wrap{
 width:500px;
 overflow:auto;
 overflow-y:hidden;
 border-right:1px solid red;
 float:left;

} .bottom {background:#ccc} </style> </head> <body>

 
A
A
A
 
ABCDEFGHI
135113157
246124166
246124166
 

</body> </html>

</source>
   
  


Make table font bold

   <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> My favorite records  </title>
       <style rel="stylesheet" type="text/css">

body {

   margin: 0;

} table {

   width: 100%;
   border: thin solid black;
   border-collapse: collapse;

} td {

   border: thin solid black;

} th, tfoot td {

   border: thin solid black;
   text-align: center;
   font-weight: bold;

} tbody td {

   font-size: 120%;

} caption {

   font-size: 90%;
   text-align: right;

} td, th, caption {

   padding: 5px;

}

       </style>
   </head>
   <body>
<colgroup> <col id="album" /> <col id="artist" /> <col id="released" /> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
Table: My favorite records.
album artist released
R T 1
B V 1
Q Q 1
M T 1
album artist released
   </body>

</html>

</source>
   
  


Set table border to collapse, 1px solid black

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> table {

border-collapse: collapse;
border: 1px solid black;

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

   <form method="get" name="copresentations">
Summary of Financial Data
Fiscal Year Worksite
Presentations
Passing Grades Number of Presentators
2003 <input type="text" name="w2003" /> <input type="text" name="p2003" /> <input type="text" name="n2003" />
2004 <input type="text" name="w2004" /> <input type="text" name="p2004" /> <input type="text" name="n2004" />
  <input type="submit" class="save" value="Save" />
 </form>

</body> </html>

</source>
   
  


Set table width, margin and text align

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .center {

 text-align: center;

} .center table {

width: 50%;
margin: 0 auto;
text-align: left;

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

Lorem ipsum dolor sit amet

This is the first cell This is the second cell
This is the third cell, it"s under the first cell This is the fourth cell, it"s under the second cell.

</body> </html>

</source>
   
  


Table background

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <style>

table {

 width: 90%;
 margin: 0 auto;
 font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
 font-size: .9em;
 line-height: 1.4em;
 border-collapse: collapse;

} caption {

 caption-side: bottom;
 line-height: 4em;
 font-family: Georgia, "Times New Roman", serif;
 font-size: .85em;
 font-style: italic;

} tr {

 border-bottom: 1px solid #999;

} tr.odd {

 background-color: #dfdfdf;

} th {

 text-align: left;
 background-color: #666;
 color: #fff;
 font-weight: normal;
 border: 1px solid #666;
 padding: 0 .5em;

} td {

 color: #333;
 border-left: 1px solid #999;
 border-right: 1px solid #999;
 padding: 0 .5em;

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

<colgroup> <col class="odd" id="name" /> <col id="affiliation" /> <col class="odd" id="url" /> <col id="role" /> </colgroup> <thead> </thead> <tbody id="authors"> </tbody> <tbody id="editors"> </tbody>
editors
N A W R
J W h A
I A h A
D W h/ A
C A h E
W A h T

</body> </html>

</source>
   
  


table background-color: #efefef;

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>

 <title>CSS Example</title>
 <style rel="stylesheet" type="text/css">

table {

 background-color: #efefef;
 width: 350px;
 border-style: solid;
 border-width: 1px;
 border-color: #999999;
 font-family: arial, verdana, sans-serif;

}

</style> </head> <body>

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html>

</source>
   
  


Table body font size

   <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> My favorite records  </title>
       <style rel="stylesheet" type="text/css">

body {

   margin: 0;

} table {

   width: 200px;
   border: thin solid black;

} th, tfoot td {

   border: thin solid black;
   text-align: center;
   font-weight: bold;

} tbody td {

   font-size: 120%;

} caption {

   font-size: 90%;
   text-align: right;

} td, th, caption {

   padding: 5px;

}

       </style>
   </head>
   <body>
       < -- 200 pixels -- >
<colgroup> <col id="album" /> <col id="artist" /> <col id="released" /> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
Table: My favorite records.
album artist released
R T 1
B V 1
Q Q 1
M T 1
album artist released
   </body>

</html>

</source>
   
  


table border-color: #999999;

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>

 <title>CSS Example</title>
 <style rel="stylesheet" type="text/css">

table {

 background-color: #efefef;
 width: 350px;
 border-style: solid;
 border-width: 1px;
 border-color: #999999;
 font-family: arial, verdana, sans-serif;

}

</style> </head> <body>

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html>

</source>
   
  


table border-style: solid;

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>

 <title>CSS Example</title>
 <style rel="stylesheet" type="text/css">

table {

 background-color: #efefef;
 width: 350px;
 border-style: solid;
 border-width: 1px;
 border-color: #999999;
 font-family: arial, verdana, sans-serif;

}

</style> </head> <body>

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html>

</source>
   
  


table border-width: 1px;

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>

 <title>CSS Example</title>
 <style rel="stylesheet" type="text/css">

table {

 background-color: #efefef;
 width: 350px;
 border-style: solid;
 border-width: 1px;
 border-color: #999999;
 font-family: arial, verdana, sans-serif;

}

</style> </head> <body>

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html>

</source>
   
  


table font-family: arial, verdana, sans-serif;

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>

 <title>CSS Example</title>
 <style rel="stylesheet" type="text/css">

table {

 background-color: #efefef;
 width: 350px;
 border-style: solid;
 border-width: 1px;
 border-color: #999999;
 font-family: arial, verdana, sans-serif;

}

</style> </head> <body>

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html>

</source>
   
  


Table inline style

   <source lang="html4strict">

<html> <head><title>Tables</title></head> <body>

X X X
X X X
X X X

</body> </html>

</source>
   
  


table tag opens a table

   <source lang="html4strict">

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

  <head>
     <title>A simple XHTML table</title>
  </head>
  <body>
<tbody> </tbody>
Apple $0.25
Orange $0.50
Banana $1.00
Pineapple $2.00
  </body>

</html>

</source>
   
  


Table width 200px

   <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> My favorite records  </title>
       <style rel="stylesheet" type="text/css">

body {

   margin: 0;

} table {

   width: 200px;
   border: thin solid black;
   table-layout: fixed;

} th, tfoot td {

   border: thin solid black;
   text-align: center;
   font-weight: bold;

} tbody td {

   font-size: 120%;

} caption {

   font-size: 90%;
   text-align: right;

} td, th, caption {

   padding: 5px;

}

       </style>
   </head>
   <body>
       < -- 200 pixels -- >
<colgroup> <col/> <col/> <col/> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
Table: My favorite records.
a a a
R T 1
B V 1
Q Q 1
M T 1
a a a
   </body>

</html>

</source>
   
  


table width: 350px;

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>

 <title>CSS Example</title>
 <style rel="stylesheet" type="text/css">

table {

 background-color: #efefef;
 width: 350px;
 border-style: solid;
 border-width: 1px;
 border-color: #999999;
 font-family: arial, verdana, sans-serif;

}

</style> </head> <body>

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html>

</source>