HTML/CSS/Table Style/table border

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

Add border space to column

 
<!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;
    border-spacing: 15px 0;
}
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/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> a</th>
                    <th> a</th>
                    <th> r</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> r</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



Add border spacing

 

<!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-spacing: 15px;
}
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/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> a</th>
                    <th> a</th>
                    <th> r</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> r</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



Add border spacing for only top and bottom

 
<!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-spacing: 0 15px;
}
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>
                My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> a</th>
                    <th> a</th>
                    <th> r</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> r</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



border-collapse: collapse

 
<?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>The effects of switching to the collapsed table border model</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em;
    }
    td {
      width: 10em;
      vertical-align: baseline;
      padding: 0 0.5em;
      border: 1px dashed black;
    }
    table.collapsed {
      border-collapse: collapse;
    }
  </style>
</head>
<body>
  <table class="separate">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
  </table>
  <table class="collapsed">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
  </table>
</body>
</html>



border-collapse: separate

 
<?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>The effects of switching to the collapsed table border model</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em;
    }
    td {
      width: 10em;
      vertical-align: baseline;
      padding: 0 0.5em;
      border: 1px dashed black;
    }
    table.separate {
      border-collapse: separate;
    }
  </style>
</head>
<body>
  <table class="separate">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
  </table>
  <table class="collapsed">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
  </table>
</body>
</html>



border-spacing: 0.5em

 
<!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>Mimicking collapsed borders</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border-width: 1px;
      border-style: solid solid none none;  
      border-color: black;
      margin: 1em;
      border-collapse: separated;
      border-spacing: 0;
    }
    td {
      vertical-align: baseline;
      padding: 0 0.5em;
      border-width: 1px;
      border-style: none none solid solid;  
      border-color: black;
    }
    table.spaced {
      border-spacing: 0.5em;
    }
  </style>
</head>
<body>
  <table class="spaced" cellspacing="0">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
  </table>
  <table cellspacing="0">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
  </table>
</body>
</html>



Bottom table 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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table {
  border-collapse: collapse;
}  
#t1 * .r2 td {
  border-bottom: 2px solid black;
}

</style>
</head>
<body>
<table id="t1"> 
    <tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr> 
    
    <tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> 
</table> 
</body>
</html>



Boxed 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 {
  border-collapse: separate;
}
* .boxed-table {
  border: 1px solid black;
}
* .boxed-cells td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table class="boxed-cells" cellspacing="5"> 
    <tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr> 
    <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>
</table> 
</body>
</html>



Collapsed Borders

 
<!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 {
  border-collapse: collapse;
}
* .boxed-table {
  border: 1px solid black;
}
* .boxed-cells td {
  border: 1px solid black;
}
* .boxed-cells td.x {
  border: none;
}
</style>
</head>
<body>
<h2>Boxed Table and Cells</h2> 
<table class="boxed-table boxed-cells" cellspacing="0"> 
    <tr><td rowspan="2">1</td><td colspan="2">2-3</td> </tr> 
    <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>
</table> 

</body>
</html>



Left table 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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table {
  border-collapse: collapse;
}  

#t1 * .c1 {
  border-left: 1px solid black;
}

</style>
</head>
<body>
<table id="t1"> 
    <tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr> 
    
    <tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> 
</table> 
</body>
</html>



Right table 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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table {
  border-collapse: collapse;
}  
#t1 * .c2 {
  border-right: 2px solid black;
}
#t1 * .c1 {
  border-right: 1px dotted black;
}
</style>
</head>
<body>
<table id="t1"> 
    <tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr> 
    
    <tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> 
</table> 
</body>
</html>



Separated Borders

 
<!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 {
  border-collapse: separate;
}
* .boxed-table {
  border: 1px solid black;
}

</style>
</head>
<body>
<h2>Boxed Table</h2> 

<table class="boxed-table" cellspacing="5"> 
    <tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr> 
    <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>
</table> 

</body>
</html>



Set table 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Colgroup 2</title>
<style>
td, th {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Personal details</caption>
<colgroup style="background-color: #ccc;"></colgroup>
<colgroup></colgroup>
<colgroup span="3"></colgroup>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">Place of residence</th>
    <th colspan="3">Date of birth </th>
  </tr>
  <tr>
    <th>dd</th>
    <th>mm</th>
    <th>yyyy</th>
  </tr>
  <tr>
    <td>P</td>
    <td>O</td>
    <td>14</td>
    <td>06</td>
    <td>1978</td>
  </tr>
  <tr>
    <td>V</td>
    <td>B</td>
    <td>12</td>
    <td>01</td>
    <td>1985</td>
  </tr>
  <tr>
    <td>L</td>
    <td>L</td>
    <td>01</td>
    <td>03</td>
    <td>1956</td>
  </tr>
  <tr>
    <td>E</td>
    <td>P</td>
    <td>28</td>
    <td>02</td>
    <td>1979</td>
  </tr>
</table>
</body>
</html>



Set table right and bottom border to solid

 

<!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>Chater 3 - Tables are Evil?</title>
  <style type="text/css" media="screen">
  
  div {
    margin-bottom: 30px;
    }
    
  #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 border-color: navy;

 


<html>
<head><title>Tables</title>
<style type="text/css">
table {
    border-width: medium;
    border-color: navy;
    border-style: groove;
}
td {
    text-align: center;
    background-color: gold;
}
</style>
</head>
<body>
<center>
<table>
    <tr>
        <td>CSS</td><td>IS</td>
    </tr>
    <tr>
        <td>VERY</td><td>COOL!</td>
    </tr>
</table>
</center>
</body>
</html>



table border groove

 
<?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>Using CSS for Borders</title>
    <style type="text/css">
      td, th {border-style: groove;}
      table {border-style: groove;}
    </style>
  </head>
  <body>
    <table summary="Prices for types">
      <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 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>
      </tbody>
    </table>
  </body>
</html>



table border-width: medium;

 


<html>
<head><title>Tables</title>
<style type="text/css">
table {
    border-width: medium;
    border-color: navy;
    border-style: groove;
}
td {
    text-align: center;
    background-color: gold;
}
</style>
</head>
<body>
<center>
<table>
    <tr>
        <td>CSS</td><td>IS</td>
    </tr>
    <tr>
        <td>VERY</td><td>COOL!</td>
    </tr>
</table>
</center>
</body>
</html>



Top table 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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table {
  border-collapse: collapse;
}  
#t1 * .r1 td {
  border-top: 1px solid black;
}

</style>
</head>
<body>
<table id="t1"> 
    <tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr> 
    
    <tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> 
</table> 
</body>
</html>



using border-spacing to create space between cells in a 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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>using border-spacing to create space between cells in a table</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em;
      border-collapse: separate;
    }
    td {
      width: 9em;
      vertical-align: baseline;
      padding: 0 0.5em;
      border: 1px dashed black;
    }
    table.nospace {
      border-spacing: 0;
    }
    table.space {
      border-spacing: 0.5em;
    }
  </style>
</head>
<body>
  <table class="nospace">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
  </table>
  <table class="space">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
  </table>
</body>
</html>



Using the differing precedences of row, column and cell borders to style a 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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Using the differing precedences of row, column and cell borders to style a table</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border-style: none hidden;
      margin: 1em 0 0 0;
      border-collapse: collapse;
    }
    td {
      width: 6em;
      vertical-align: baseline;
      padding: 0 0.5em;
      border: 1px dashed black;
    }
    tbody {
      border: 2px solid black;
    }
    tr {
      border: 1px solid black;
    }
    colgroup {
      border: 4px solid black;
      border-style: none solid;
    }
    col#col1 {
      border-color: black;
      border-width: 1px;
      border-style: none solid;
    }
  </style>
</head>
<body>
  <table>
    <colgroup>
      <col id="col1"/>
      <col />
    </colgroup>
    <colgroup>
      <col />
      <col />
      <col />
    </colgroup>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_border&oldid=5073»