HTML/CSS/CSS Attributes and Javascript Style Properties/table layout
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>
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>
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>
Column 1 | Column 2 | Column 3 |
---|---|---|
Column 1 | Column 2 | Column 3 |
</body>
</html>
</source>