HTML/CSS/Table Style/table body — различия между версиями

Версия 09:21, 26 мая 2010

Содержание

1 A basic table
2 All table content is enclosed within the tbody
3 An Accessible Table
4 Centered Sized Table
5 Column groups 2
6 Horizontal Stretched Table
7 How tables linearize
8 How tables linearize for layouts
9 Indented Stretched Table
10 Left-offset Shrinkwrapped Table
11 Left-offset Sized Table
12 Right-aligned Sized Table
13 Right-offset Sized Table
14 Selecting all cells
15 Selecting all tables and cells
16 Style for table body
17 Table heads, bodies and footers
18 Using the th element for table headings

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>

HTML/CSS/Table Style/table body — различия между версиями

Версия 09:21, 26 мая 2010

Содержание

A basic table

All table content is enclosed within the tbody

An Accessible Table

Centered Sized Table

Column groups 2

Horizontal Stretched Table

How tables linearize

How tables linearize for layouts

Indented Stretched Table

Left-offset Shrinkwrapped Table

Left-offset Sized Table

Right-aligned Sized Table

Right-offset Sized Table

Selecting all cells

Selecting all tables and cells

Style for table body

Table heads, bodies and footers

Using the th element for table headings

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 08:16, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Версия 09:21, 26 мая 2010 (просмотреть исходный код) (обсуждение) Следующая правка →
(нет различий)