HTML/CSS/Table Style/table border

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

Add border space to column

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

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>
<colgroup> <col/> <col/> <col/> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
Table: My favorite records.
a a r
R T 1
B V 1
Q Q 1
M T 1
a a r 
   </body>

</html> 

</source>


Add border spacing

   <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-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>
<colgroup> <col/> <col/> <col/> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
Table: My favorite records.
a a r
R T 1
B V 1
Q Q 1
M T 1
a a r 
   </body>

</html> 

</source>


Add border spacing for only top and bottom

   <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-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>
<colgroup> <col/> <col/> <col/> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
My favorite records.
a a r
R T 1
B V 1
Q Q 1
M T 1
a a r 
   </body>

</html> 

</source>


border-collapse: collapse

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

Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

</body> </html> 

</source>


border-collapse: separate

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

Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

</body> </html> 

</source>


border-spacing: 0.5em

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

Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

</body> </html> 

</source>


Bottom table border

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> table { 

 border-collapse: collapse;

}

  1. t1 * .r2 td {
 border-bottom: 2px solid black;

}

</style> </head> <body>

1 2
1 2

</body> </html> 

</source>


Boxed Cells

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

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

12-3
78  11

</body> </html> 

</source>


Collapsed Borders

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

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

Boxed Table and Cells

12-3
78  11

</body> </html> 

</source>


Left table border

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> table { 

 border-collapse: collapse;

}

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

}

</style> </head> <body>

1 2
1 2

</body> </html> 

</source>


Right table border

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> table { 

 border-collapse: collapse;

}

  1. t1 * .c2 {
 border-right: 2px solid black;

}

  1. t1 * .c1 {
 border-right: 1px dotted black;

} </style> </head> <body>

1 2
1 2

</body> </html> 

</source>


Separated Borders

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

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

Boxed Table

12-3
78  11

</body> </html> 

</source>


Set table border

   <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>Colgroup 2</title> <style> td, th { 

 border: 1px solid black;

} </style> </head> <body>

<colgroup style="background-color: #ccc;"></colgroup> <colgroup></colgroup> <colgroup span="3"></colgroup>
Personal details
Name Place of residence Date of birth
dd mm yyyy
P O 14 06 1978
V B 12 01 1985
L L 01 03 1956
E P 28 02 1979

</body> </html> 

</source>


Set table right and bottom border to solid

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

This is the title of the table
Year Opponent Item 3
1918 Item A 75-51
1916 Item B 91-63
1915 Item C 101-50
1912 Item D 105-47

</body> </html> 

</source>


table border-color: navy;

   <source lang="html4strict">


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

CSSIS
VERYCOOL!

</body> </html> 

</source>


table border groove

   <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>Using CSS for Borders</title>
   <style type="text/css">
     td, th {border-style: groove;}
     table {border-style: groove;}
   </style>
 </head>
 <body>
<thead> </thead> <tbody> </tbody>
Pizza Type Small Medium Large
Thin Crust 3.99 4.99 6.99
Deep Dish 4.99 6.99 8.99
Stuffed Crust 5.99 7.99 9.99 
 </body>

</html> 

</source>


table border-width: medium;

   <source lang="html4strict">


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

CSSIS
VERYCOOL!

</body> </html> 

</source>


Top table border

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> table { 

 border-collapse: collapse;

}

  1. t1 * .r1 td {
 border-top: 1px solid black;

}

</style> </head> <body>

1 2
1 2

</body> </html> 

</source>


using border-spacing to create space between cells in a table

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

Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

</body> </html> 

</source>


Using the differing precedences of row, column and cell borders to style a table

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

<colgroup> <col id="col1"/> <col /> </colgroup> <colgroup> <col /> <col /> <col /> </colgroup> <tbody> </tbody> <tbody> </tbody>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_border&oldid=5073»