HTML/CSS/Table Style/table body

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

A basic table

 

<?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>  
<table border="1" align="left">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
</body>
</html>



All table content is enclosed within the tbody

 

<?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>
      <table border = "1" width = "40%" summary = "summary">
         <tbody>
            <tr>
               <td>Apple</td>
               <td>$0.25</td>
            </tr>
            <tr>
               <td>Orange</td>
               <td>$0.50</td>
            </tr>
            <tr>
               <td>Banana</td>
               <td>$1.00</td>
            </tr>
            <tr>
               <td>Pineapple</td>
               <td>$2.00</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>



An Accessible Table

 
<?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>
<table>
  <tr>
    <th></th>
    <th id="Saturday">Saturday</th>
    <th id="Sunday">Sunday</th>
  </tr>
  <tr>
    <th id="Morning">Morning</th>
    <td headers="Saturday Morning" abbr="Structure and markup">mark up text.</td>
    <td headers="Sunday Morning" abbr="Tables, forms and frames">frames.</td>
  </tr>
  <tr>
    <th id="Afternoon">Afternoon</th>
    <td headers="Saturday Afternoon" abbr="Links, color, images, objects">pages.</td>
    <td headers="Sunday Afternoon" abbr="CSS">this is a test. .</td>
  </tr>
</table>
</body>
</html>



Centered Sized Table

 
<!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>
<div class="parent"> 
  <table class="c-sized"><tr><td>Centered Sized Table</td></tr></table> 
</div> 

</body>
</html>



Column groups 2

 
<?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>
<table>
  <colgroup span="10">
    <col span="9" width="100" id="mainColumns" />
    <col span="1" width="200" id="totalColumn" />
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>
</body>
</html>



Horizontal Stretched Table

 
<!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 {
  width: 100%;
  background: yellow;
}
</style>
</head>
<body>
  <table id="table"><tr><td>Horiz. Stretched Table</td></tr></table> 
</body>
</html>



How tables linearize

 
<?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>
<table border="1">
  <tr>
    <td>Column 1, Row 1</td>
    <td>Column 2 Row 1</td>
  </tr>
  <tr>
    <td>Column 1, Row 2</td>
    <td>Column 2, Row 2</td>
  </tr>
</table>
</body>
</html>



How tables linearize for layouts

 
<?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>
<table>
  <tr>
    <td colspan="2" class="heading">Page heading and logo</td>
  </tr>
  <tr>
    <td class="navigation">item 1 <br />
        item 2 <br />
        item 3 <br />
        item 4 <br />
    </td>
    <td>
      <table>
        <tr><td>Article 1</td></tr>
        <tr><td>Article 2</td></tr>
        <tr><td>Article 3</td></tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="footer">Footer</td>
  </tr>
</table>
</body>
</html>



Indented Stretched Table

 
<!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>
<div class="parent"> 
<table class="stretched"><tr><td>Indented Stretched Table</td></tr></table> 
</div> 
</body>
</html>



Left-offset Shrinkwrapped Table

 
<!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>
<div class="parent"> 
<table class="l-wrap"><tr><td>Left-offset Shrinkwrapped Table</td></tr></table> 

</div> 
</body>
</html>



Left-offset Sized Table

 
<!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>
<div class="parent"> 
  <table class="l-sized"><tr><td>Left-offset Sized Table</td></tr></table> 
</div> 
</body>
</html>



Right-aligned Sized Table

 

<!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>
<div class="parent"> 
  <table class="r-sized"><tr><td>Right-aligned Sized Table</td></tr></table> 
</div> 

</body>
</html>



Right-offset Sized Table

 
<!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>
<div class="parent"> 
<table class="r-sized"><tr><td>Right-offset Sized Table</td></tr></table> 
</div> 
</body>
</html>



Selecting all cells

 
<!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>
<table id="t1"> 
    <thead> 
        <tr class="r1"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </thead> 
    <tfoot> 
        <tr class="r3"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tfoot> 
    <tbody class="b1"> 
        <tr class="r2"> 
            <td class="c1">r2 c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tbody> 
</table> 
</body>
</html>



Selecting all tables and cells

 
<!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>
<table id="t1"> 
    <thead> 
        <tr class="r1"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </thead> 
    <tfoot> 
        <tr class="r3"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tfoot> 
    <tbody class="b1"> 
        <tr class="r2"> 
            <td class="c1">r2 c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tbody> 
</table> 
</body>
</html>



Style for table body

 

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>
<h2>Row Groups</h2> 
<table class="example1"> 
    <thead> <tr> <th>thead</th> <th>2 </th> <th>3 </th> <th>4 </th> </tr> </thead> 
    <tfoot> <tr> <th>tfoot</th> <td>10</td> <td>11</td> <td>12</td> </tr> </tfoot> 
    <tbody> <tr> <th>tbody</th> <td>6 </td> <td>7 </td> <td>8 </td> </tr> </tbody> 
</table> 

</body>
</html>



Table heads, bodies and footers

 
<?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>
<table>
  <thead>
    <tr>
      <td colspan="4">This is the head of the table</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="4">This is the foot of the table</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td height="100">Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td height="100">Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td height="100">Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td height="100">Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>
</body>
</html>



Using the th element for table headings

 
<?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 &lt;th&gt; element for table headings</title>
</head>
<body>
<table border="1">
  <tr>
    <th></th>
    <th>O($)</th>
    <th>R($)</th>
    <th>P($)</th>
  </tr>
  <tr>
    <th>Q1 (Jan-Mar)</th>
    <td>1.00</td>
    <td>2.00</td>
    <td><b>1.00</b></td>
  </tr>
  <tr>
    <th>Q2 (Apr-Jun)</th>
    <td>1.00</td>
    <td>2.00</td>
    <td><b>1.00</b></td>
  </tr>
  <tr>
    <th>Q3 (Jul - Sep)</th>
    <td>1.00</td>
    <td>2.00</td>
    <td><b>1.00</b></td>
  </tr>
  <tr>
    <th>Q4 (Oct - Dec)</th>
    <td>1.00</td>
    <td>2.00</td>
    <td><b>1.00</b></td>
  </tr>
</table>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_body&oldid=5085»