HTML/CSS/Table Style/table cell

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

Boxed Table and 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;

}

  • .boxed-cells td.x {
 border: none;

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

12-3
78  11

</body> </html> 

</source>


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

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

</html> 

</source>


Cell with no Border

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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>Table Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { 

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

} td { 

 border: solid 1px black;
 width: 100px;
 empty-cells: hide;

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

Race 1 Race 2 Race 3
Driver A 33s 50s 45s
Driver B 56s 23s 11s

</body> </html> 

</source>


Empty table header 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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Scope 1</title> </head> <body>

Staff Managers
Short Tall
Bitbyte 11 9 1
UltraHyperMegaCorp 2100 900 1000

</body> </html> 

</source>


Hidden, Removed Cells and 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,td,th { 

 border: 1px solid black;

}

  • .collapsed {
 border-collapse: collapse;

}

  • .x {
 display: none;

}

  • .h {
 visibility: hidden;

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

</body> </html> 

</source>


Hidden, Removed Cells and 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,td,th { 

 border: 1px solid black;

}

  • .separated {
 border-collapse: separate;

}

  • .x {
 display: none;

}

  • .h {
 visibility: hidden;

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

1234
1234

</body> </html> 

</source>


Hide empty 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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Empty cells 1</title> <style> table { 

 empty-cells: hide;

} td, th { 

 border: 1px solid black;

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

S M
S T
B 11 9 1
U 2100 900 1000

</body> </html> 

</source>


Line break in a table cell

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

   <HTML>
       <HEAD>
           <TITLE></TITLE>
       </HEAD>
       <BODY>

                       this is a test. 

                       this is a test. 

                       this is a test. 

                       this is a test. 


     </BODY>
  </HTML>
</source>


Right-offset Shrinkwrapped 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"> <head> 

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

<style type="text/css" title="text/css"> .parent { 

 width: 600px;
 height: 600px;
 background: black;

}

  • .r-wrap {
 width: auto;
 margin-left: auto;
 margin-right: 20px;
 background: pink;

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

Right-offset Shrinkwrapped Table

</body> </html> 

</source>


Selecting cells in body

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

  1. t1 tbody td {
 font-variant: small-caps;

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

<thead> </thead> <tfoot> </tfoot> <tbody class="b1"> </tbody>
c1 c2 c3 c4 c5 c6
c1 c2 c3 c4 c5 c6
r2 c1 c2 c3 c4 c5 c6

</body> </html> 

</source>


Shading border for table cell

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

 padding: 10px;
 margin-bottom: 15px;
 border: 2px solid black;

} td { 

 margin-top: 0px;
 margin-bottom: 10px;
 padding-right: 5px;
 background-color: gold;
 padding-top: 5px;
 padding-bottom: 5px;
 border-left: 1px solid gray;
 border-right: 2px solid black;
 border-top: 1px solid gray;
 border-bottom: 2px solid black;

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

Normal Tabler1c2r1c3
row2r2c2r2c3

</body> </html> 

</source>


Table cell background and align, indent

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

 width: auto;
 height: 1px;
 table-layout: auto;
 border-collapse: collapse;
 margin-left: 20px;
 border: 1px solid black;

} td,th { 

 width: 50px;
 height: 1px;
 overflow: hidden;
 visibility: visible;
 border: 1px solid black;
 padding: 5px;
 background: pink;
 text-align: center;
 vertical-align: middle;
 text-indent: 5px;

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

Simple Table

1 2 3 4 5 6
7 8 9 10 11 12

</body> </html> 

</source>


Table cell border

   <source lang="html4strict">

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

} td, th+th { 

 border: 5px solid #666;

}

td+td { 

 border: 5px solid #ccc;
 text-align: center;

} td#winner { 

 border: 7px dotted #999;

} 

 </style>

</head> <body>

<tbody> 
         General
  E L U 
         Total 

         272,091

         *****

         *****

         Sex
Male 2 3 6
Female 6 4 1

</body> </html> 

</source>


Table cell hover

   <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>tr 2</title> <style> tr { background: white; } tr.alt { background: yellow; } tr:hover {background: pink;} td:hover {background:red;} </style> </head> <body>

Name Place of residence
P P
B B
L L
P P

</body> </html> 

</source>


table cell hover with 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> 

   <head>
       <title></title>
       <style rel="stylesheet" type="text/css">

body { 

   padding: 10px;
   margin: 10px auto;
   min-width: 500px;
   max-width: 900px;

} table.myStyle { 

   width: 100%;
   margin-bottom: 5px;

} caption { 

   text-align: left;
   margin-bottom: 5px;
   text-transform: lowercase;
   font-size: 160%;
   padding: 5px;
   letter-spacing: 10px;
   font-weight: bold;

} table.myStyle thead th { 

   font-weight: bold;
   font-size: 150%;
   color: black;

} table.myStyle thead th, table.myStyle tbody td { 

   padding: 5px;
   text-transform: lowercase;

} table.myStyle tbody td, table.myStyle tfoot td { 

   font-size: 130%;

} table.myStyle tfoot td { 

   padding: 5px;

} table.myStyle tbody td:hover, table.myStyle thead th:hover, table.myStyle tfoot td ul:hover, table.myStyle caption:hover, table.myStyle tfoot td p:hover { 

   background: black;
   color: white;
   font-weight: bold;

} table.myStyle tfoot td p { 

   padding: 5px;

} li { 

   margin-left: 30px;
   padding-left: 30px;

} 

       </style>
   </head>
   <body>
<colgroup> <col/> <col/> <col/> <col/> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
S
quantity measurement product instructions
.5 C B
  • P

S 

   </body>

</html> 

</source>


table cell overflow hidden

   <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: 200px;
   border: thin solid black;
   table-layout: fixed;

} th, td { 

   overflow: hidden;

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

       < -- 200 pixels -- >
<colgroup> <col/> <col/> <col/> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
My favorite records.
a a r
a a r 
   </body>

</html> 

</source>


Table cell 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>
       <head>
           <title></title>
           <style type="text/css">
              table {
                  font: 16px sans-serif;
                  border: 1px solid black;
              }
              td {
                  border: 1px solid black;
                  width: 125px;
              }
              td#largefont {
                  font-size: 60px;
                  vertical-align: baseline;
              }
              td.baseline {
                  vertical-align: baseline;
              }               
           </style>
       </head>
       <body>

                       L

                       The contents of this cell 
                       are aligned to the baseline.

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


Table with Spanned Rows and 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 { 

 width: auto;
 height: 1px;
 table-layout: auto;
 border-collapse: collapse;
 margin-left: 20px;
 border: 1px solid black;

} td,th { 

 width: 50px;
 height: 1px;
 overflow: hidden;
 visibility: visible;
 border: 1px solid black;
 padding: 5px;
 background: pink;
 text-align: center;
 vertical-align: middle;
 text-indent: 5px;

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

Table with Spanned Rows and Cells

1 2-3
8 9   12

</body> </html> 

</source>


td background-color: gold;

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


td font-weight: bold;

   <source lang="html4strict">


<html> <head><title>Tables</title> <style type="text/css"> td { 

 text-align: center;
 font-weight: bold;

} table { 

 background-color: blue;
 color: white;

} caption { 

 background-color: red;
 color: yellow;
 font-weight: bold;

} th { 

 background-color: gold;
 color: navy

} td.center { 

 background-color: white;
 color: black;

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

How to Use Tables
Col 1 Col 2 Col 3
X X X
X X X
X X X

</body> </html> 

</source>


td text-align: center;

   <source lang="html4strict">


<html> <head><title>Tables</title> <style type="text/css"> td { 

 text-align: center;
 font-weight: bold;

} table { 

 background-color: blue;
 color: white;

} caption { 

 background-color: red;
 color: yellow;
 font-weight: bold;

} th { 

 background-color: gold;
 color: navy

} td.center { 

 background-color: white;
 color: black;

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

How to Use Tables
Col 1 Col 2 Col 3
X X X
X X X
X X X

</body> </html> 

</source>


td text-align: center; and border

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


Text Indent

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

  • .myStyle {
 text-indent: 60px;

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

text-indent 
       indents the first line of a terminal block element

</body> </html> 

</source>


tr and td

   <source lang="html4strict">

<html> <head><title>Tables</title></head> <body>

X X X
X X X
X X X

</body> </html> 

</source>


use table cell as block

   <source lang="html4strict">

<html> 

   <head>
        <style type="text/css" media="all">
           table {
               margin: auto;
           }
           td {
               background: #ccc;
               margin: 10%;
               border: 5px solid black;
               padding: 10%;
               width: 100%;
               color: black;
               font-size: 200%;
               text-align: center;
           }

       </style>
   </head>
   <body>

                   Some content.

   </body>

</html> 

</source>


vertically aligned to the bottom of the cell

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

  • .align-bottom {
 height: 200px;
 vertical-align: bottom;

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

vertically aligned to the bottom of the cell.

</body> </html> 

</source>


vertically aligned to the middle of the cell

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

  • .align-middle {
 height: 200px;
 vertical-align: middle;

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

vertically aligned to the middle of the cell.

</body> </html> 

</source>


Vertically aligned to the top of the cell

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

  • .align-top {
 height: 200px;
 vertical-align: top;

}

</style> </head> <body>

vertically aligned to the top of the cell.

</body> </html>

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