HTML/CSS/Table Style/table data

Материал из Web эксперт
Версия от 08:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Add different cell space

 
<?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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Vertical alignment examples</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em 1em 0 1em;
    }  
    p.extraSpace {
      margin: 1.5em 0 0 0;
    }
    p.lessSpace {
      margin: 0.5em 0 0 0;
    }
    table.type3 p {
      margin: 0;
      padding: 0.75em 0;
    }
    table.type3 td.two p {
      padding: 0.5em 0;
    }
    table.type3 td.three p {
      padding: 1em 0;
    }
  </style>
</head>
<body>
  <table class="type2">
    <tr>
      <td>this is a test. </td>
      <td class="two"><p>this is a test. </p></td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td><p>this is a test. </p></td>
      <td class="two"><p>this is a test. </p></td>
      <td class="three"><p>this is a test. </p></td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td><p>Lorem ipsum dolor</p></td>
      <td class="two"><p>this is a test. </p></td>
      <td class="three"><p class="extraSpace">this is a test. </p></td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td><p>Lorem ipsum dolor</p></td>
      <td class="two"><p>Lorem ipsum dolor</p></td>
      <td class="three"><p class="lessSpace">Lorem ipsum dolor</p></td>
    </tr>
  </table>
  <table class="type3">
    <tr>
      <td><p>Lorem ipsum dolor</p></td>
      <td class="two"><p>Lorem ipsum dolor</p></td>
      <td class="three"><p>Lorem ipsum dolor</p></td>
    </tr>
  </table>
  <table class="type3">
    <tr>
      <td><p>Lorem ipsum dolor</p></td>
      <td class="two"><p>Lorem ipsum dolor</p></td>
      <td class="three">Lorem ipsum dolor</td>
    </tr>
  </table>
</body>
</html>



empty-cells: hide

 
<!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">
table {
    width: 100%;
    border: thin solid black;
    empty-cells: hide;
}
td:empty {
    background: gray;
}
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/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> Column 1</th>
                    <th> Column 2</th>
                    <th> Column 3</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> Column 1</td>
                    <td> Column 2</td>
                    <td> Column 3</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



Set margin and padding for td tag

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

td {
 padding: 0;
 margin: 0;
}

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



Set style for an anchor in table cell

 

<!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">
td a {
 display: block;
 background-color: #333;
 color: white;
 text-decoration: none;
 padding: 4px;
}
</style>
</head>
<body>
     <table cellspacing="15">
   <tr>
     <th colspan="2">
      General 
     </th>
   </tr>
   <tr>
     <th>
     </th>
     <th>
      Estimate
     </th>
   </tr>
   <tr>
     <td>
      <a href=" ">Total population</a>
     </td>
     <td>
      272,091
     </td>
   </tr>
  </table>
</body>
</html>



Set style for image in a table cell

 

<!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">
td img {
 display: block;
}
</style>
</head>
<body>
  <table>
    <tr>
   <td><img src="bkgd.jpg" alt=" " /></td>
  </table>
</body>
</html>



Set td tag to have border: 1px solid black, width:6em

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

td {
 width:6em;
 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>



Table and table cell backgrounds

 
<!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>Table and table cell backgrounds</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      background-color: rgb(230,230,230);
      border: 1px solid black;
      margin: 1em;
      border-collapse: separated;
    }
    td {
      vertical-align: baseline;
      padding: 0 0.5em;
      border: 1px dashed black;
    }
    td.background {
      background-color: rgb(200,200,200);
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td class="background">Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td class="background">Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td class="background">Lorem ipsum dolor</td>
    </tr>
  </table>
</body>
</html>



Table border and table header, cell border

 

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  
  div {
    margin-bottom: 30px;
    }
    
  
  #divID table { 
    border-top: 1px solid #999; 
    border-left: 1px solid #999; 
    border-collapse: collapse; 
    } 
  
  #divID th, #divID td { 
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999; 
    } 
  
  
  </style>
</head>
<body>

<div id="divID">
<table summary="Summary goes here">
  <caption>This is the title of the table</caption>
  <tr>
    <th>Year</th>
    <th>Opponent</th>
    <th>Item 3</th>
  </tr>
  <tr>
    <td>1918</td>
    <td>Item A</td>
    <td>75-51</td>
  </tr>
  <tr>
    <td>1916</td>
    <td>Item B</td>
    <td>91-63</td>
  </tr>
  <tr>
    <td>1915</td>
    <td>Item C</td>
    <td>101-50</td>
  </tr>
  <tr>
    <td>1912</td>
    <td>Item D</td>
    <td>105-47</td>
  </tr>
</table>
</div>
</body>
</html>



table cell alignment

 
<?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>Adding Text Alignmnet</title>
    <style type="text/css">
      td {border:1px solid black;}
      table {border:1px solid black;}
      td.number{text-align: right;color: blue;}
      td.text{text-align: left;}
    </style>
  </head>
  <body>
    <table summary="This table">
      <caption>Our Pizza Selections</caption>
      <thead>
        <tr>
          <th scope="col">Pizza Type</th>
          <th scope="col">Small</th>
          <th scope="col">Medium</th>
          <th scope="col">Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text" scope="row">Thin Crust</td>
          <td class="number">3.99</td>
          <td class="number">4.99</td>
          <td class="number">6.99</td>
        </tr>
        <tr>
          <td class="text" scope="row">Deep Dish</td>
          <td class="number">4.99</td>
          <td class="number">6.99</td>
          <td class="number">8.99</td>
        </tr>
        <tr>
          <td class="text" scope="row">Stuffed Crust</td>
          <td class="number">5.99</td>
          <td class="number">7.99</td>
          <td class="number">9.99</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>



Table cell padding

 
<!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;
    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>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> Column 1</th>
                    <th> Column 2</th>
                    <th> Column 3</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> Column 1</td>
                    <td> Column 2</td>
                    <td> Column 3</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



table cells with vertical alignment

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type="text/css">
               table {
                   font: 16px sans-serif;
                   border: 1px solid black;
               }
               td {
                   border: 1px solid black;
                   width: 125px;
               }
               td.baseline {
                   vertical-align: baseline;
               }
               td#largefont {
                   font-size: 60px;
                   vertical-align: baseline;
               }
               td#top {
                   vertical-align: top;   
               }
               td#middle {
                   vertical-align: middle;
               }
               td#bottom {
                   vertical-align: bottom;
               }
            </style>
        </head>
        <body>
            <table>
                <tr>
                    <td class="baseline">
                        The contents of this cell 
                        are aligned to the baseline.
                    </td>
                    <td class="baseline" id="largefont">
                        L
                    </td>
                    <td id="top">
                        The contents of this cell 
                        are top aligned.
                    </td>
                    <td id="middle">
                        The contents of this 
                        cell are middle aligned.
                    </td>
                    <td id="bottom">
                        The contents of this 
                        cell are bottom aligned.
                    </td>
                </tr>            
            </table>
        </body>
    </html>



Table cell with dashed black border

 
<!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>Vertical alignment across a table row using vertical-align: baseline</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em 1em 0 1em;
    }
    td {
      width: 10em;
      line-height: 1.5em;
      padding: 0.25em;
      border: 1px dashed black;
    }
    table.type1 td {
      vertical-align: top;
    }
    table.type2 td {
      vertical-align: baseline;
    }
    td.two {
      line-height: 2.5em;
    }
    td.three {
      line-height: 2em;
    }
  </style>
</head>
<body>
  <table class="type1">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
</body>
</html>



Table cell with different class

 
<!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>Vertical alignment across a table row using vertical-align: baseline</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em 1em 0 1em;
    }
    table.type1 td {
      vertical-align: top;
    }
    table.type2 td {
      vertical-align: baseline;
    }
    td.two {
      line-height: 2.5em;
    }
    td.three {
      line-height: 2em;
    }
  </style>
</head>
<body>
  <table class="type1">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
</body>
</html>



Table cell with line height setting

 

<!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>Vertical alignment across a table row using vertical-align: baseline</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em 1em 0 1em;
    }
    td {
      width: 10em;
      line-height: 1.5em;
      padding: 0.25em;
      border: 1px dashed black;
    }
    table.type1 td {
      vertical-align: top;
    }
    table.type2 td {
      vertical-align: baseline;
    }
    td.two {
      line-height: 2.5em;
    }
    td.three {
      line-height: 2em;
    }
  </style>
</head>
<body>
  <table class="type1">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
</body>
</html>



Table cell with vertical-align: baseline

 
<!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>Vertical alignment across a table row using vertical-align: baseline</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em 1em 0 1em;
    }
    td {
      width: 10em;
      line-height: 1.5em;
      padding: 0.25em;
      border: 1px dashed black;
    }
    table.type1 td {
      vertical-align: top;
    }
    table.type2 td {
      vertical-align: baseline;
    }
    td.two {
      line-height: 2.5em;
    }
    td.three {
      line-height: 2em;
    }
  </style>
</head>
<body>
  <table class="type1">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
</body>
</html>



Table cell with vertical-align: top

 
<!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>Vertical alignment across a table row using vertical-align: baseline</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em 1em 0 1em;
    }
    td {
      width: 10em;
      line-height: 1.5em;
      padding: 0.25em;
      border: 1px dashed black;
    }
    table.type1 td {
      vertical-align: top;
    }
    table.type2 td {
      vertical-align: baseline;
    }
    td.two {
      line-height: 2.5em;
    }
    td.three {
      line-height: 2em;
    }
  </style>
</head>
<body>
  <table class="type1">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
</body>
</html>



td:empty

 
<!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;
}
td:empty {
    background: gray;
}
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/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> Column 1</th>
                    <th> Column 2</th>
                    <th> Column 3</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> Column 1</td>
                    <td> Column 2</td>
                    <td> Column 3</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



Use table cell border to highlight total

 


<!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: 5px solid #444;
}
td {
 padding: 4px;
}
th {
 color: white;
 background-color: #00B3FF;
}
td, th+th {
 border: 2px solid #666;
}
td+td {
 border: 2px solid #ccc;
 text-align: center;
}
td#winner {
 border: 5px dotted #999;
}
</style>
</head>
<body>
  <table cellspacing="15">
    <tr>
      <th colspan="4">General</th>
    </tr>
    <tr>
      <th></th>
      <th>Estimate</th>
      <th>Lower Bound</th>
      <th>Upper Bound</th>
    </tr>
    <tr>
      <td>Total population</td>
      <td>272,091</td>
      <td>1234</td>
      <td>1234</td>
    </tr>
    <tr>
      <td colspan="4">Sex</td>
    </tr>
    <tr>
      <td>Male</td>
      <td>129,179</td>
      <td>127,670</td>
      <td>131,908</td>
    </tr>
    <tr>
      <td>Female</td>
      <td id="winner">142,302</td>
      <td>140,183</td>
      <td>144,421</td>
    </tr>
  </table>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_data&oldid=5097»