HTML/CSS/Table Style/table column

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

colgroup and col tags are used to format entire columns

   <source lang="html4strict">

<?xml version = "1.0"?> <!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> - Tables</title>
  </head>
  <body>
<colgroup> <col align = "right" span = "1" /> </colgroup> <thead> </thead> <tbody> </tbody>
Here is a more complex sample table.
# of Humps Indigenous region Spits? Produces Wool?
C 2 A L L
L 1 A 
  </body>

</html> 

</source>


Column Background

   <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. ts td {
 background: white;

}

  1. t1 td.c3 {
 background: darkgreen;
 color: white;

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

r1 c1 c2 c3 c4
r2 c1 c2 c3 c4
r3 c1 c2 c3 c4
r4 c1 c2 c3 c4
r5 c1 c2 c3 c4

</body> </html> 

</source>


Column Groups

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

  • .col1 {
 background: wheat;

}

  • .col2 {
 background: gold;

}

  • .col3 {
 background: orange;

}

  • .col4 {
 background: tomato;

}

  • .col5 {
 background: firebrick;

}

  • .col6 {
 background: black;
 color: white;

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

<colgroup> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <col class="col6" /> </colgroup>
1 2-3
8 9 asdf asdf 12

</body> </html> 

</source>


Column widths

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> 

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

body { 

 background-color: #ffffff;
 font-family: arial, verdana, sans-serif;
 font-size: 12px;

} p.narrow { 

 width: 200px;

} p.wide { 

 width: 700px;

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. Proin erat. Donec sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. Proin erat. Donec sem.

</body> </html> 

</source>


css is for the table layout

   <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> <title>CSS Table</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> table { width:100%;margin-top:25px;clear:both;} .column1, .column2, .column3, .column4 {width:25%;border-bottom:1px solid #fff;vertical-align:top;} .column1 {background:pink} .column2 {background:yellow} .column3 {background:red} .column4 {background:blue;} </style> </head> <body>

This is cell 1 : This is cell 1 : This is cell 2 : This is cell 2 This is Cell 3 : This is Cell 3 : This is cell 4 with the most text: This is cell 4 with the most text:
This is Cell 1 : This is Cell 1 : This is cell 2 : This is cell 2 This is cell 3 with the most text: This is cell 3 with the most text: This is cell 4 : This is cell 4 :
This is cell 1 : This is cell 1 This is cell 2 with the most text: This is cell 2 with the most text This is Cell 3 : This is Cell 3 : This is cell 4 : This is cell 4 :
This is cell 1 with the most text: This is cell 1 with the most text This is cell 2 : This is cell 2 This is Cell 3 : This is Cell 3 : This is cell 4 : This is cell 4 :

</body> </html> 

</source>


Hiding column

   <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 * .c3 {
 visibility: hidden;

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

<tbody class="b1"> </tbody> <tbody class="b2"> </tbody> <tbody class="b3"> </tbody>
r1 c1 2 r1 c3 4
r2 c1 2 r2 c3 4
r3 c1 2 r3 c3 4
r4 c1 2 r4 c3 4
r5 c1 2 r5 c3 4

</body> </html> 

</source>


Interior column 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-left: 1px dotted black;

}

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

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

1 2
1 2

</body> </html> 

</source>


rowspans and colspans merge the specified number of cells vertically or horizontally

   <source lang="html4strict">

<?xml version = "1.0"?> <!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> - Tables</title>
  </head>
  <body>
<thead> </thead> <tbody> </tbody> 
                 Picture

this is a test.
# I S P
C 2 A L L
L 1 A 
  </body>

</html> 

</source>


Selecting cells in column

   <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 * .c3 {
 display: none;

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


Table with column span 2

   <source lang="html4strict">

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

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

                    Some text.

                    Some more text.

                    Yet some more text.

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


Table with number 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>Hummus</title>
           <style type="text/css" media="all">
               table {
                   border-width: 0px;
                   width: 500px;
               }
               th {
                   background: #ccc;
                   color: white;
               }
               tfoot td {
                   background: #808080;
                   color: white;
               }
           </style>
       </head>
       <body>
<thead> </thead> <tbody> </tbody> <tfoot> </tfoot> 
                           H

                           #

                           M

                           P

                           I
1 # C D
15 C F
2 T S
8 T R
2 C T
2 T P C 
                            this is a test. 

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