HTML/CSS/Table Style/table size

Содержание

1 Adding auto width to a Table
2 Column width
3 Column Width: percentage, auto and px
4 Fixed Table
5 Fixed Table Sized Columns
6 Fixed Table with fixed width
7 Maximum-width Sized Columns
8 Minimum-width Sized Columns
9 Shrinkwrapped Table
10 Shrinkwrapped Table column width
11 Sized or Stretched Table
12 Sized Table
13 Sized Table
14 Stretched Table
15 table auto width and height
16 Table border and cell border
17 table width: 100%
18 Table width: auto
19 Shrinkwrapped Table

Adding auto width to 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">

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title>Auto width on tables</title>
       <style type="text/css">
           table {
               width: auto;
               background: black;
               color: red;
           }
       </style>
   </head>
   <body>

How will this table react to auto width?

   </body>

</html>

</source>

Column width

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

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

body {

   font-family: sans-serif;

} table {

   border: 1px solid black;
   caption-side: bottom;
   width: 200px;
   table-layout: fixed;

} th {

   background: lightyellow;

} th, td {

   border: 1px solid black;
   padding: 5px;
   overflow: hidden;

} col#album {

   width: 200px;
   background: red;
   color: crimson;

} col#released {

   width: 1%;
   background: pink;

} div#control {

   width: 200px;
   background: crimson;
   color: white;
   text-align: center;
   font-family: monospace;
   margin-bottom: 5px;
   padding: 3px 0;

}

       </style>
   </head>
   <body>

           < -- 200 pixels -- >

My favorite records.
album	artist	released
R	AAA	1965
B	V	1967
M	T	1995

   </body>

</html>

</source>

Column Width: percentage, auto and px

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.i {

 background-color: pink;

}

.a {

 width: auto;

}

.b {

 width: 75px;

}

.c {

 width: 150px;

}

.d {

 width: 10%;

}

.e {

 width: 50%;

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

auto	auto	auto	auto	auto
auto	75px	75px	75px	75px
auto	auto	150px	150px	150px
auto	auto	auto	10%	10%
auto	auto	auto	auto	50%

</body> </html>

</source>

Fixed Table

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.fixed-layout {

 table-layout: fixed;

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

auto

</body> </html>

</source>

Fixed Table Sized Columns

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.fixed-layout {

 table-layout: fixed;
 background: pink;

}

.sized1 {

 width: 200px;

}

.min-width1 {

 width: 1px;

}

</style> </head> <body>

200px

300px

</body> </html>

</source>

Fixed Table with fixed width

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.fixed-layout {

 table-layout: fixed;

}

.size3 {

 width: 100px;
 background: red;

}

.size4 {

 width: 300px;
 background: gold;

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

100px

300px

</body> </html>

</source>

Maximum-width Sized Columns

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.auto-layout {

 table-layout: auto;

}

.sized1 {

 width: 200px;

}

.shrinkwrapped {

 width: auto;
 background: yellow;

}

</style> </head> <body>

200px

300px

</body> </html>

</source>

Minimum-width Sized Columns

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.fixed-layout {

 table-layout: fixed;
 background: pink;

}

.min-width2 {

 width: 700px;

}

.sized1 {

 width: 200px;

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

200px

300px

</body> </html>

</source>

Shrinkwrapped Table

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.auto-layout {

 table-layout: auto;

}

.shrinkwrapped {

 width: auto;
 background: pink;

}

.size1 {

 width: 1000px;
 background: gray;

}

.size2 {

 width: 3000px;
 background: menu;

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

1000px

3000px

</body> </html>

</source>

Shrinkwrapped Table column width

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.auto-layout {

 table-layout: auto;

}

.shrinkwrapped {

 width: auto;
 background: yellow;

}

.sized1 {

 width: 200px;

}

</style> </head> <body>

200px

300px

</body> </html>

</source>

Sized or Stretched Table

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.auto-layout {

 table-layout: auto;

}

.sized {

 width: 700px;
 background: red;

}

.stretched {

 width: 100%;
 background: gold;

}

.size3 {

 width: 100px;

}

.size4 {

 width: 300px;

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

100px

300px

</body> </html>

</source>

Sized Table

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.auto-layout {

 table-layout: auto;

}

.sized {

 width: 350px;

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

Sized Table

auto

</body> </html>

</source>

Stretched Table

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.auto-layout {

 table-layout: auto;

}

.stretched {

 width: 100%;

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

auto

</body> </html>

</source>

table auto width and height

   <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 {
           border: thin solid black;
           width: auto;
           height: auto;
       }
           </style>
       </head>
       <body>

                 The table only expands enough for the content inside of it.

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

Table border and cell border

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

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

body {

   font-family: sans-serif;

} table {

   border: 1px solid black;
   caption-side: bottom;
   width: 200px;

} th {

   background: lightyellow;

} th, td {

   border: 1px solid red;
   padding: 5px;

} div#control {

   width: 200px;
   background: crimson;
   color: white;
   text-align: center;
   font-family: monospace;
   margin-bottom: 5px;
   padding: 3px 0;

}

       </style>
   </head>
   <body>

           < -- 200 pixels -- >

My favorite records.
album	artist	released
R	AAA	1965
B	V	1967
M	T	1995

   </body>

</html>

</source>

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

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

body {

   font-family: sans-serif;

} table {

   border: 1px solid black;
   caption-side: bottom;
   width: 100%;

} th {

   background: lightyellow;

} th, td {

   border: 1px solid red;
   padding: 5px;

} col#album {

   width: 200px;
   background: pink;
   color: crimson;

} col#released {

   width: 1%;
   background: gold;

}

       </style>
   </head>
   <body>

My favorite records.
album	artist	released
R	AAA	1965
B	V	1967
M	T	1995

   </body>

</html>

</source>

Table width: auto

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

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

.auto-layout {

 table-layout: auto;

}

.shrinkwrapped {

 width: auto;

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

Shrinkwrapped Table

auto

</body> </html>

</source>

HTML/CSS/Table Style/table size

Содержание

Adding auto width to a Table

Column width

Column Width: percentage, auto and px

Fixed Table

Fixed Table Sized Columns

Fixed Table with fixed width

Maximum-width Sized Columns

Minimum-width Sized Columns

Shrinkwrapped Table

Shrinkwrapped Table column width

Sized or Stretched Table

Sized Table

Sized Table

Stretched Table

table auto width and height

Table border and cell border

table width: 100%

Table width: auto

Shrinkwrapped Table

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты