HTML/CSS/Table Style/table data

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

Add different cell space

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

this is a test.

this is a test.

this is a test.

this is a test.

this is a test.

this is a test.

Lorem ipsum dolor

this is a test.

this is a test.

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>


empty-cells: hide

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

</html> 

</source>


Set margin and padding for td tag

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

td { 

padding: 0;
margin: 0;

}

</style> </head> <body> 

   <form method="get" name="copresentations">
Summary of Financial Data
Fiscal Year Worksite
Presentations 		Passing Grades Number of Presentators
2003 <input type="text" name="w2003" /> <input type="text" name="p2003" /> <input type="text" name="n2003" />
2004 <input type="text" name="w2004" /> <input type="text" name="p2004" /> <input type="text" name="n2004" /> 
  <input type="submit" class="save" value="Save" />
 </form>

</body> </html> 

</source>


Set style for an anchor in table cell

   <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"> td a { 

display: block;
background-color: #333;
color: white;
text-decoration: none;
padding: 4px;

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

     General 

     Estimate

     <a href=" ">Total population</a>

     272,091

</body> </html> 

</source>


Set style for image in a table cell

   <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"> td img { 

display: block;

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

<img src="bkgd.jpg" alt=" " />

</body> </html> 

</source>


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

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

td { 

width:6em;
border: 1px solid black;

}

</style> </head> <body> 

   <form method="get" name="copresentations">
Summary of Financial Data
Fiscal Year Worksite
Presentations 		Passing Grades Number of Presentators
2003 <input type="text" name="w2003" /> <input type="text" name="p2003" /> <input type="text" name="n2003" />
2004 <input type="text" name="w2004" /> <input type="text" name="p2004" /> <input type="text" name="n2004" /> 
  <input type="submit" class="save" value="Save" />
 </form>

</body> </html> 

</source>


Table and table cell backgrounds

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

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>


Table border and table header, cell 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" 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>

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

   <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>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>
<thead> </thead> <tbody> </tbody>
Our Pizza Selections
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 cell padding

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

</html> 

</source>


table cells with vertical alignment

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

                       The contents of this cell 
                       are aligned to the baseline.

                       L

                       The contents of this cell 
                       are top aligned.

                       The contents of this 
                       cell are middle aligned.

                       The contents of this 
                       cell are bottom aligned.

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


Table cell with dashed black 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" 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>

this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.

</body> </html> 

</source>


Table cell with different class

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

this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.

</body> </html> 

</source>


Table cell with line height setting

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

this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.

</body> </html> 

</source>


Table cell with vertical-align: baseline

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

this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.

</body> </html> 

</source>


Table cell with vertical-align: top

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

this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.

</body> </html> 

</source>


td:empty

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

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

</html> 

</source>


Use table cell border to highlight total

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

General
Estimate Lower Bound Upper Bound
Total population 272,091 1234 1234
Sex
Male 129,179 127,670 131,908
Female 142,302 140,183 144,421

</body> </html> 

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