HTML/CSS/Table Style/table body

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

A basic table

   <source lang="html4strict">

<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head> 

 <title>A basic table</title>

</head> <body>

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

</body> </html> 

</source>


All table content is enclosed within the tbody

   <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>


An Accessible 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" lang="en" xml:lang="en"> <head> 

 <title>An Accessible Table</title>
 <style type="text/css">
   body {font-family:arial, verdana, helvetica;}
   th {background-color:#cccccc;
        width:200;}
   td {width:200;}
 </style>

</head> <body>

Saturday Sunday
Morning mark up text. frames.
Afternoon pages. this is a test. .

</body> </html> 

</source>


Centered Sized 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" title="text/css"> .parent { 

 width: 600px;
 height: 600px;
 background: black;

}

  • .c-sized {
 width: 350px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 background: gray;

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

Centered Sized Table

</body> </html> 

</source>


Column groups 2

   <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>Column groups</title>

</head> <body>

<colgroup span="10"> <col span="9" width="100" id="mainColumns" /> <col span="1" width="200" id="totalColumn" /> </colgroup>
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10

</body> </html> 

</source>


Horizontal Stretched 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> <title></title> <style type="text/css">

  1. table {
 width: 100%;
 background: yellow;

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

Horiz. Stretched Table

</body> </html> 

</source>


How tables linearize

   <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>How tables linearize</title>

</head> <body>

Column 1, Row 1 Column 2 Row 1
Column 1, Row 2 Column 2, Row 2

</body> </html> 

</source>


How tables linearize for layouts

   <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>How tables linearize for layouts</title>
 <style type="text/css">
   table {width:100%;}
   .heading {width:100%; background-color:#e9e9e9; font-weight:bold; font-size:20px; padding:10px;}
   .navigation {width:20%; background-color:#999999; color:#FFFFFF;}
   .footer {width:100%; background-color:#e9e9e9; font-weight:bold; font-size:20px; padding:10px;}
 </style>

</head> <body>

Page heading and logo
item 1 
       item 2 

       item 3 

       item 4
Article 1
Article 2
Article 3
Footer

</body> </html> 

</source>


Indented Stretched 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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen">

  • .stretched {
 width: 80%;
 margin-left: auto;
 margin-right: auto;
 background: yellow;

} .parent{ 

   width: 600px;
   height: 600px;
   background: gold;

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

Indented Stretched Table

</body> </html> 

</source>


Left-offset Shrinkwrapped 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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen">

  • .l-wrap {
 width: auto;
 margin-left: 60px;
 margin-right: auto;
 background: gray;

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

Left-offset Shrinkwrapped Table

</body> </html> 

</source>


Left-offset Sized 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" title="text/css"> .parent { 

 width: 600px;
 height: 600px;
 background: black;

}

  • .l-sized {
 width: 350px;
 margin-left: 20px;
 margin-right: auto;
 text-align: left;
 background: purple;

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

Left-offset Sized Table

</body> </html> 

</source>


Right-aligned Sized 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" title="text/css"> .parent { 

 width: 600px;
 height: 600px;
 background: black;

}

  • .r-sized {
 width: 350px;
 margin-left: auto;
 margin-right: 0;
 text-align: right;
 background: blue;
 color: white;

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

Right-aligned Sized Table

</body> </html> 

</source>


Right-offset Sized 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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen">

  • .r-sized {
 width: 300px;
 margin-left: auto;
 margin-right: 60px;
 text-align: right;
 background: gold;

} .parent{ 

   width: 600px;
   height: 600px;
   background: red;

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

Right-offset Sized Table

</body> </html> 

</source>


Selecting all cells

   <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=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> td,th { 

 background-color: white;

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

<thead> </thead> <tfoot> </tfoot> <tbody class="b1"> </tbody>
c1 c2 c3 c4 c5 c6
c1 c2 c3 c4 c5 c6
r2 c1 c2 c3 c4 c5 c6

</body> </html> 

</source>


Selecting all tables and cells

   <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=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> table,td,th { 

 border: 1px solid black;

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

<thead> </thead> <tfoot> </tfoot> <tbody class="b1"> </tbody>
c1 c2 c3 c4 c5 c6
c1 c2 c3 c4 c5 c6
r2 c1 c2 c3 c4 c5 c6

</body> </html> 

</source>


Style for table body

   <source lang="html4strict">

Row and Column Groups <!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=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> table.example1 tbody { 

 background: red;
 color: black;

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

Row Groups

<thead> </thead> <tfoot> </tfoot> <tbody> </tbody>
thead 2 3 4
tfoot 10 11 12
tbody 6 7 8

</body> </html> 

</source>


Table heads, bodies and footers

   <source lang="html4strict">

<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head> 

 <title>Table heads, bodies and footers</title>
 <style type="text/css">
   thead, tfoot {border:solid; background-color:#efefef; font-size:36px;}
   td {height:100px;}
 </style>

</head> <body>

<thead> </thead> <tfoot> </tfoot> <tbody> </tbody> <tbody> </tbody>
This is the head of the table
This is the foot of the table
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4

</body> </html> 

</source>


Using the th element for table headings

   <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>Using the <th> element for table headings</title>

</head> <body>

O($) R($) P($)
Q1 (Jan-Mar) 1.00 2.00 1.00
Q2 (Apr-Jun) 1.00 2.00 1.00
Q3 (Jul - Sep) 1.00 2.00 1.00
Q4 (Oct - Dec) 1.00 2.00 1.00

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_body&oldid=5085»