Просмотр исходного текста страницы HTML/CSS/Table Style/table

==A simple XHTML table==




   
  <!-- start source code -->
   
    <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>
      <table border = "1" width = "40%" summary = "summary">
         <caption><strong>Price of Fruit</strong></caption>
         <thead>
            <tr>
               <th>Fruit</th>
               <th>Price</th>
            </tr>
         </thead>
         <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>
         <tfoot>
            <tr>
               <th>Total</th>
               <th>$3.75</th>
            </tr>
         </tfoot>
      </table>
   </body>
</html> 
 </source>
    
   


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




   
  <!-- start source code -->
   
    <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>
      <table>
        <tr>
          <td>
            A table with auto width only expands enough to accomodate its content.
          </td>
        </tr>
      </table>     
    </body>
</html>
 </source>
    
   


==basic table==




   
  <!-- start source code -->
   
    <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>
    <table border="1" summary="Prices for types of pizza by size">
      <tr>
        <td scope="col">Pizza Type</td>
        <td scope="col">Small</td>
        <td scope="col">Medium</td>
        <td scope="col">Large</td>
      </tr>
      <tr>
        <td scope="row">Thin Crust</td>
        <td>3.99</td>
        <td>4.99</td>
        <td>6.99</td>
      </tr>
      <tr>
        <td scope="row">Deep Dish</td>
        <td>4.99</td>
        <td>6.99</td>
        <td>8.99</td>
      </tr>
      <tr>
        <td scope="row">Stuffed Crust</td>
        <td>5.99</td>
        <td>7.99</td>
        <td>9.99</td>
      </tr>
    </table>
  </body>
</html>
 </source>
    
   


==Basic table with tr, td==




   
  <!-- start source code -->
   
    <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>
<table border="1">
  <tr>
    <td>N</td>
    <td>P</td>
  </tr>
  <tr>
    <td>P</td>
    <td>O</td>
  </tr>
  <tr>
    <td>V</td>
    <td>B</td>
  </tr>
  <tr>
    <td>L</td>
    <td>L</td>
  </tr>
  <tr>
    <td>E</td>
    <td>P</td>
  </tr>
</table>
</body>
</html>
 </source>
    
   


==Calendar table==




   
  <!-- start source code -->
   
    <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;
}
#year {
 font-family: monospace;
 font-size: 1.5em;
 padding: 0;
 margin: 0;
}
#month {
 font-family: monospace;
 font-size: 2em;
 padding: 0;
 margin: 0;
}
#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;
}
#today {
 border: 2px solid black;
}
</style>
</head>
<body>
  <table cellspacing="0">
    <tr><th colspan="7" id="year"><a href="">&lt;</a> 2000 <a href="">&gt;</a></th></tr>
    <tr><th colspan="7" id="month"><a href="">&lt;</a> October <a href="">&gt;</a></th></tr>
    <tr id="days">
      <th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th>
    </tr>
    <tr>
      <td class="weekend">
        <div>
          <a href="1.html" class="date">1</a> <a href="add.html" class="addevent">+</a>
        </div>
      </td>
      <td>
        <div>
          <a href="2.html" class="date">2</a> <a href="add.html" class="addevent">+</a>
        </div><a href="" class="event">Event 1</a>
      </td>
      <td>
        <div>
          <a href="3.html" class="date">3</a> <a href="add.html" class="addevent">+</a>
        </div>
      </td>
      <td>
        <div>
          <a href="4.html" class="date">4</a> <a href="add.html" class="addevent">+</a>
        </div>
      </td>
      <td>
        <div>
          <a href="5.html" class="date">5</a> <a href="add.html" class="addevent">+</a>
        </div><a href="" class="event">Event 2</a>
      </td>
      <td>
        <div>
          <a href="6.html" class="date">6</a> <a href="add.html" class="addevent">+</a>
        </div>
      </td>
      <td class="weekend">
        <div>
          <a href="7.html" class="date">7</a> <a href="add.html" class="addevent">+</a>
        </div><a href="" class="event">Event 4</a>
      </td>
    </tr>
    <tr>
      <td class="weekend">
        <div>
          <a href="29.html" class="date">29</a> <a href="add.html" class="addevent">+</a>
        </div>
        <div class="event">Event 5</div>
      </td>
      <td>
        <div>
          <a href="30.html" class="date">30</a> <a href="add.html" class="addevent">+</a>
        </div><a href="" class="event">Event 6</a>
      </td>
      <td>
        <div>
          <a href="31.html" class="date">31</a> <a href="add.html" class="addevent">+</a>
        </div><a href="" class="event">Event 7</a> <a href="31.html?id=2" class="event">Event 8</a>
      </td>
      <td>
        <div class="emptydate">
          &nbsp;
        </div>
      </td>
      <td>
        <div class="emptydate">
          &nbsp;
        </div>
      </td>
      <td>
        <div class="emptydate">
          &nbsp;
        </div>
      </td>
      <td class="weekend">
        <div class="emptydate">
          &nbsp;
        </div>
      </td>
    </tr>
  </table>
</body>
</html>
 </source>
    
   


==Fixed table first column==




   
  <!-- start source code -->
   
    <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}
#container {width:605px}
table#name {
  width:100px;
  background:#ffffcc;
  float:left;
}
table#data {
  background:#ffffcc;
  width:900px;  
}
td {
  border:1px solid red;
}
#data td {width:100px;}
#wrap{
  width:500px;
  overflow:auto;
  overflow-y:hidden;
  border-right:1px solid red;
  float:left;
}
.bottom {background:#ccc}
</style>
</head>
<body>
<div id="container"> 
  <table id="name" cellspacing="0" cellpadding="0">
    <tr><td>&nbsp;</td></tr>
    <tr><td>A</td></tr>
    <tr><td>A</td></tr>    
    <tr><td>A</td></tr>
    <tr> 
      <td class="bottom">&nbsp;</td>
    </tr>
  </table>
  <div id="wrap"> 
    <table id="data" cellspacing="0" cellpadding="0">
      <tr> 
        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td>
      </tr>
      <tr> 
        <td>1</td><td>3</td><td>5</td><td>1</td><td>1</td><td>3</td><td>1</td><td>5</td><td>7</td>
      </tr>
      <tr> 
        <td>2</td><td>4</td><td>6</td><td>1</td><td>2</td><td>4</td><td>1</td><td>6</td><td>6</td>
      </tr>
      <tr> 
        <td>2</td><td>4</td><td>6</td><td>1</td><td>2</td><td>4</td><td>1</td><td>6</td><td>6</td>
      </tr>
      <tr> 
        <td class="bottom" colspan="9">&nbsp;</td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>
 </source>
    
   


==Make table font bold==




   
  <!-- start source code -->
   
    <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>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col id="album" />
                <col id="artist" />
                <col id="released" />
            </colgroup>
            <thead>
                <tr>
                    <th> album            </th>
                    <th> artist           </th>
                    <th> released         </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> B</td>
                    <td> V</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> Q</td>
                    <td> Q</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> M</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td> album            </td>
                    <td> artist           </td>
                    <td> released         </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
 </source>
    
   


==Set table border to collapse, 1px solid black==




   
  <!-- start source code -->
   
    <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">
   <table cellspacing="0">
    <caption>
     Summary of Financial Data
    </caption>
    <tr>
     <th scope="col">Fiscal Year </th>
     <th scope="col">Worksite<br />
      Presentations </th>
     <th scope="col">Passing Grades </th>
     <th scope="col">Number of Presentators </th>
    </tr>
    <tr>
     <th scope="row">2003</th>
     <td><input type="text" name="w2003" /></td>
     <td><input type="text" name="p2003" /></td>
     <td><input type="text" name="n2003" /></td>
    </tr>
    <tr>
     <th scope="row">2004</th>
     <td><input type="text" name="w2004" /></td>
     <td><input type="text" name="p2004" /></td>
     <td><input type="text" name="n2004" /></td>
    </tr>
   </table>
   <input type="submit" class="save" value="Save" />
  </form>
</body>
</html>
 </source>
    
   


==Set table width, margin and text align==




   
  <!-- start source code -->
   
    <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>
  <h2 id="warning">Lorem ipsum dolor sit amet</h2> 
  <div class="center">
   <table width="50%" border="1" cellpadding="30">
    <tr>
     <td>This is the first cell</td>
     <td>This is the second cell</td>
    </tr>
    <tr>
     <td>This is the third cell, it"s under the first cell</td>
     <td>This is the fourth cell, it"s under the second cell.</td>
    </tr>
   </table>
  </div>

</body>
</html>
 </source>
    
   


==Table background==




   
  <!-- start source code -->
   
    <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>
  <table summary="">
    <caption>editors</caption>
    <colgroup>
      <col class="odd" id="name" />
      <col id="affiliation" />
      <col class="odd" id="url" />
      <col id="role" />
    </colgroup>
    <thead>
      <tr>
        <th scope="col">N</th>
        <th scope="col">A</th>
        <th scope="col" abbr="URL">W</th>
        <th scope="col">R</th>
      </tr>
    </thead>
    <tbody id="authors">
      <tr class="odd">
        <td scope="row">J</td>
        <td>W</td>
        <td>h</td>
        <td>A</td>
      </tr>
      <tr>
        <td scope="row">I</td>
        <td>A</td>
        <td>h</td>
        <td>A</td>
      </tr>
      <tr class="odd">
        <td scope="row">D</td>
        <td>W</td>
        <td>h/</td>
        <td>A</td>
      </tr>
    </tbody>
    <tbody id="editors">
      <tr>
        <td scope="row">C</td>
        <td>A</td>
        <td>h</td>
        <td>E</td>
      </tr>
      <tr class="odd">
        <td scope="row">W</td>
        <td>A</td>
        <td>h</td>
        <td>T</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
 </source>
    
   


==table background-color: #efefef;==




   
  <!-- start source code -->
   
    <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>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>
 </source>
    
   


==Table body font size==




   
  <!-- start source code -->
   
    <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>
        <div style="width: 200px;
                     height: 30px;
                     background: gray;
                     color: white;
                     text-align: center;">
        &lt; -- 200 pixels -- &gt;
      </div>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col id="album" />
                <col id="artist" />
                <col id="released" />
            </colgroup>
            <thead>
                <tr>
                    <th> album            </th>
                    <th> artist           </th>
                    <th> released         </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> B</td>
                    <td> V</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> Q</td>
                    <td> Q</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> M</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td> album            </td>
                    <td> artist           </td>
                    <td> released         </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
 </source>
    
   


==table border-color: #999999;==




   
  <!-- start source code -->
   
    <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>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>
 </source>
    
   


==table border-style: solid;==




   
  <!-- start source code -->
   
    <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>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>
 </source>
    
   


==table border-width: 1px;==




   
  <!-- start source code -->
   
    <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>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>
 </source>
    
   


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




   
  <!-- start source code -->
   
    <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>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>
 </source>
    
   


==Table inline style==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 

<html>
<head><title>Tables</title></head>
<body>
<table border="10"
       style="background-color: aqua; border-color: red blue gold teal;">
   <tr> <td>X</td> <td>X</td> <td>X</td> </tr>
   <tr> <td>X</td> <td>X</td> <td>X</td> </tr>
   <tr> <td>X</td> <td>X</td> <td>X</td> </tr>
</table>
</body>
</html>
 </source>
    
   


==table tag opens a table==




   
  <!-- start source code -->
   
    <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>
      <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> 
 </source>
    
   


==Table width 200px==




   
  <!-- start source code -->
   
    <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>
        <div style="width: 200px;
                     height: 30px;
                     background: gray;
                     color: white;
                     text-align: center;">
        &lt; -- 200 pixels -- &gt;
      </div>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> a</th>
                    <th> a</th>
                    <th> a</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> B</td>
                    <td> V</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> Q</td>
                    <td> Q</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> M</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td> a</td>
                    <td> a</td>
                    <td> a</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
 </source>
    
   


==table width: 350px;==




   
  <!-- start source code -->
   
    <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>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>
 </source>