HTML/CSS/CSS Attributes and Javascript Style Properties/table layout

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

table-layout: auto

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

   border: thin solid black;
   table-layout: auto;

} 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-layout" Example

   <source lang="html4strict">
   

<html> <body>

<col width="150"> <col width="400"> <col width="200"> <thead height="20"> </thead>
150px wide column 400px wide column 200px wide column
Cell 1 content Cell 2 content Cell 3 content

</body> </html>


     </source>
   
  


table-layout: fixed and width 100%

   <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;
   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
Column 1 Column 2 Column 3
   </body>

</html>

</source>