HTML/CSS/Table Style/table size

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

Adding auto width to a Table

 

<!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">
    <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>
        <table>
            <tbody>
                <tr>
                    <td>How will this table react to auto width?</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>



Column width

 

<!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">
    <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>
        <div id="control">
            &lt; -- 200 pixels -- &gt;
        </div>
        <table>
            <caption>
                My favorite records.
            </caption>
            <colgroup>
                <col id="album" />
                <col id="artist" />
                <col id="released" />
            </colgroup>
            <thead>
                <tr>
                    <th> album</th><th> artist</th><th> released</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td><td> AAA</td><td> 1965</td>
                </tr>
                <tr>
                    <td> B</td><td> V</td><td> 1967</td>
                </tr>
                <tr>
                    <td> M</td><td> T</td><td> 1995</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>



Column Width: percentage, auto and px

 
<!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">
* .i {
  background-color: pink;
}
* .a {
  width: auto;
}
* .b {
  width: 75px;
}
* .c {
  width: 150px;
}
* .d {
  width: 10%;
}
* .e {
  width: 50%;
}
</style>
</head>
<body>
<table> 
    <tr> 
        <td class="a i">auto</td>
        <td class="a">auto</td> 
        <td class="a">auto</td> 
        <td class="a">auto</td> 
        <td class="a">auto</td>
    </tr> 
    <tr> 
        <td class="a">auto</td> 
        <td class="b i">75px</td> 
        <td class="b">75px</td> 
        <td class="b">75px</td> 
        <td class="b">75px</td>
    </tr> 
    <tr> 
        <td class="a">auto</td> 
        <td class="a">auto</td> 
        <td class="c i">150px</td> 
        <td class="c">150px</td> 
        <td class="c">150px</td>
    </tr> 
    <tr> 
        <td class="a">auto</td> 
        <td class="a">auto</td> 
        <td class="a">auto</td> 
        <td class="d i">10%</td> 
        <td class="d">10%</td>
    </tr> 
    <tr> 
        <td class="a">auto</td> 
        <td class="a">auto</td> 
        <td class="a">auto</td> 
        <td class="a">auto</td> 
        <td class="e i">50%</td>
    </tr> 
</table> 

</body>
</html>



Fixed Table

 
<!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">
* .fixed-layout {
  table-layout: fixed;
}
</style>
</head>
<body>
<table class="fixed-layout sized"> <tr><td>auto</td><td>auto</td></tr></table> 

</body>
</html>



Fixed Table Sized Columns

 
<!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">
* .fixed-layout {
  table-layout: fixed;
  background: pink;
}
* .sized1 {
  width: 200px;
}
* .min-width1 {
  width: 1px;
}

</style>
</head>
<body>
<table class="fixed-layout min-width1"> 
    <tr> <td class="sized1">200px</td> <td class="sized2">300px</td></tr>
</table> 

</body>
</html>



Fixed Table with fixed width

 

<!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">
* .fixed-layout {
  table-layout: fixed;
}

* .size3 {
  width: 100px;
  background: red;
}
* .size4 {
  width: 300px;
  background: gold;
}
</style>
</head>
<body>

<table class="fixed-layout sized"> 
    <tr> <td class="size3">100px</td> 
    <td class="size4">300px</td></tr>
</table> 

</body>
</html>



Maximum-width Sized Columns

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

* .auto-layout {
  table-layout: auto;
}
* .sized1 {
  width: 200px;
}
* .shrinkwrapped {
  width: auto;
  background: yellow;
}

</style>
</head>
<body>

<div class="sized2"> 
    <table class="auto-layout shrinkwrapped"> 
        <tr> <td class="sized1">200px</td><td class="sized2">300px</td></tr>
    </table>
</div> 

</body>
</html>



Minimum-width Sized Columns

 
<!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">
* .fixed-layout {
  table-layout: fixed;
  background: pink;
}
* .min-width2 {
  width: 700px;
}
* .sized1 {
  width: 200px;
}
</style>
</head>
<body>
<table class="fixed-layout min-width2"> 
    <tr><td class="sized1">200px</td> <td class="sized2">300px</td>
    </tr>
</table> 

</body>
</html>



Shrinkwrapped Table

 

<!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">
* .auto-layout {
  table-layout: auto;
}
* .shrinkwrapped {
  width: auto;
  background: pink;
}
* .size1 {
  width: 1000px;
  background: gray;
}
* .size2 {
  width: 3000px;
  background: menu;
}
</style>
</head>
<body>
<table class="auto-layout shrinkwrapped"> 
    <tr> <td class="size1">1000px</td> 
    <td class="size2">3000px</td></tr>
</table> 

</body>
</html>



Shrinkwrapped Table column width

 

<!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">
* .auto-layout {
  table-layout: auto;
}
* .shrinkwrapped {
  width: auto;
  background: yellow;
}

* .sized1 {
  width: 200px;
}

</style>
</head>
<body>
 
<table class="auto-layout shrinkwrapped"> 
    <tr> <td class="sized1">200px</td> <td class="sized2">300px</td></tr>
</table> 


</body>
</html>



Sized or Stretched Table

 

<!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">
* .auto-layout {
  table-layout: auto;
}
* .sized {
  width: 700px;
  background: red;
}
* .stretched {
  width: 100%;
  background: gold;
}
* .size3 {
  width: 100px;
}
* .size4 {
  width: 300px;
}
</style>
</head>
<body>
<table class="auto-layout stretched"> 
    <tr> <td class="size3">100px</td> 
    <td class="size4">300px</td></tr>
</table> 

</body>
</html>



Sized Table

 
<!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">
* .auto-layout {
  table-layout: auto;
}
* .sized {
  width: 350px;
}
</style>
</head>
<body>
<h2>Sized Table</h2> 
<table class="auto-layout sized"> <tr><td>auto</td><td>auto</td></tr></table> 

</body>
</html>



Stretched Table

 

<!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">
* .auto-layout {
  table-layout: auto;
}
* .stretched {
  width: 100%;
}
</style>
</head>
<body>
<table class="auto-layout stretched"> <tr><td>auto</td><td>auto</td></tr></table> 

</body>
</html>



table auto width and height

 
<!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>
      <table>
          <tr>
              <td>
                  The table only expands enough for the content inside of it.
              </td>
          </tr>
      </table>
        </body>
    </html>



Table border and cell border

 
<!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">
    <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>
        <div id="control">
            &lt; -- 200 pixels -- &gt;
        </div>
        <table>
            <caption>
                My favorite records.
            </caption>
            <colgroup>
                <col id="album" />
                <col id="artist" />
                <col id="released" />
            </colgroup>
            <thead>
                <tr>
                    <th> album</th><th> artist</th><th> released</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td><td> AAA</td><td> 1965</td>
                </tr>
                <tr>
                    <td> B</td><td> V</td><td> 1967</td>
                </tr>
                <tr>
                    <td> M</td><td> T</td><td> 1995</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>



table width: 100%

 

<!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">
    <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>
        <table>
            <caption>
                My favorite records.
            </caption>
            <colgroup>
                <col id="album" />
                <col id="artist" />
                <col id="released" />
            </colgroup>
            <thead>
                <tr>
                    <th> album</th><th> artist</th><th> released</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td><td> AAA</td><td> 1965</td>
                </tr>
                <tr>
                    <td> B</td><td> V</td><td> 1967</td>
                </tr>
                <tr>
                    <td> M</td><td> T</td><td> 1995</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>



Table width: auto

 

<!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">
* .auto-layout {
  table-layout: auto;
}
* .shrinkwrapped {
  width: auto;
}
</style>
</head>
<body>
<h2>Shrinkwrapped Table</h2> 
<table class="auto-layout shrinkwrapped"> 
    <tr><td>auto</td><td>auto</td></tr>
</table> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_size&oldid=5086»