http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FTable_Style%2Ftable_column
HTML/CSS/Table Style/table column - История изменений
2026-04-04T11:57:08Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_column&diff=5090&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_column&diff=5091&oldid=prev
Admin: 1 версия
2010-05-26T08:16:24Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==colgroup and col tags are used to format entire columns==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<head><br />
<title> - Tables</title><br />
</head><br />
<body><br />
<table border = "1"><br />
<caption>Here is a more complex sample table.</caption><br />
<colgroup><br />
<col align = "right" span = "1" /><br />
</colgroup><br />
<thead><br />
<tr valign = "bottom"><br />
<th># of Humps</th><br />
<th>Indigenous region</th><br />
<th>Spits?</th><br />
<th>Produces Wool?</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<th>C</th><br />
<td>2</td><br />
<td>A</td><br />
<td rowspan = "2">L</td><br />
<td rowspan = "2">L</td><br />
</tr><br />
<tr><br />
<th>L</th><br />
<td>1</td><br />
<td>A</td><br />
</tr><br />
</tbody><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Column Background==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
#ts td {<br />
background: white;<br />
} <br />
#t1 td.c3 {<br />
background: darkgreen;<br />
color: white;<br />
} <br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<tr class="r1 odd"> <td class="c1">r1 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
<tr class="r2"> <td class="c1">r2 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
<tr class="r3 odd"> <td class="c1">r3 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
<tr class="r4"> <td class="c1">r4 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
<tr class="r5 odd"> <td class="c1">r5 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Column Groups==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .col1 {<br />
background: wheat;<br />
}<br />
* .col2 {<br />
background: gold;<br />
}<br />
* .col3 {<br />
background: orange;<br />
}<br />
* .col4 {<br />
background: tomato;<br />
}<br />
* .col5 {<br />
background: firebrick;<br />
}<br />
* .col6 {<br />
background: black;<br />
color: white;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table> <br />
<colgroup><br />
<col class="col1" /><br />
<col class="col2" /><br />
<col class="col3" /> <br />
<col class="col4" /><br />
<col class="col5" /><br />
<col class="col6" /><br />
</colgroup> <br />
<br />
<tr> <br />
<td rowspan="2">1</td> <br />
<td colspan="2">2-3</td> <br />
</tr> <br />
<tr> <br />
<td>8</td> <br />
<td>9</td> <br />
<td>asdf </td> <br />
<td>asdf</td> <br />
<td>12</td> <br />
</tr> <br />
</table> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Column widths==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Column widths</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
background-color: #ffffff;<br />
font-family: arial, verdana, sans-serif;<br />
font-size: 12px;<br />
}<br />
p.narrow {<br />
width: 200px;<br />
}<br />
p.wide {<br />
width: 700px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="narrow"><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id <br />
commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam <br />
semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. <br />
Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam <br />
ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus <br />
ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. <br />
Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus <br />
ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, <br />
sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. <br />
Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. <br />
Proin erat. Donec sem. <br />
</p><br />
<p class="wide"><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id <br />
commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam <br />
semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. <br />
Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam <br />
ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus <br />
ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. <br />
Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus <br />
ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, <br />
sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. <br />
Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. <br />
Proin erat. Donec sem. <br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==css is for the table layout==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>CSS Table</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css"><br />
table { width:100%;margin-top:25px;clear:both;}<br />
.column1, .column2, .column3, .column4 {width:25%;border-bottom:1px solid #fff;vertical-align:top;}<br />
.column1 {background:pink}<br />
.column2 {background:yellow}<br />
.column3 {background:red}<br />
.column4 {background:blue;}<br />
</style><br />
</head><br />
<body><br />
<table cellspacing="0" cellpadding="2" summary="This is an example equalising layout"><br />
<tr> <br />
<td class="column1">This is cell 1 : This is cell 1 :</td><br />
<td class="column2">This is cell 2 : This is cell 2</td><br />
<td class="column3">This is Cell 3 : This is Cell 3 :</td><br />
<td class="column4">This is cell 4 with the most text: This is cell 4 with <br />
the most text: </td><br />
</tr><br />
<tr> <br />
<td class="column1">This is Cell 1 : This is Cell 1 :</td><br />
<td class="column2">This is cell 2 : This is cell 2</td><br />
<td class="column3">This is cell 3 with the most text: This is cell 3 with <br />
the most text:</td><br />
<td class="column4">This is cell 4 : This is cell 4 : </td><br />
</tr><br />
<tr> <br />
<td class="column1">This is cell 1 : This is cell 1</td><br />
<td class="column2">This is cell 2 with the most text: This is cell 2 with <br />
the most text</td><br />
<td class="column3">This is Cell 3 : This is Cell 3 :</td><br />
<td class="column4">This is cell 4 : This is cell 4 : </td><br />
</tr><br />
<tr> <br />
<td class="column1">This is cell 1 with the most text: This is cell 1 with <br />
the most text</td><br />
<td class="column2">This is cell 2 : This is cell 2</td><br />
<td class="column3">This is Cell 3 : This is Cell 3 :</td><br />
<td class="column4">This is cell 4 : This is cell 4 : </td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Hiding column==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
#t1 * .c3 {<br />
visibility: hidden;<br />
} <br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<br />
<tbody class="b1"> <br />
<tr class="r1"> <br />
<td class="c1">r1 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r1 c3</td> <br />
<td class="c4">4</td> <br />
</tr> <br />
<br />
<tr class="r2"> <br />
<td class="c1">r2 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r2 c3</td> <br />
<td class="c4">4</td> <br />
</tr><br />
</tbody> <br />
<br />
<tbody class="b2"> <br />
<tr class="r3"> <br />
<td class="c1">r3 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r3 c3</td> <br />
<td class="c4">4</td> <br />
</tr> <br />
<tr class="r4"> <br />
<td class="c1">r4 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r4 c3</td> <br />
<td class="c4">4</td> <br />
</tr><br />
</tbody> <br />
<br />
<tbody class="b3"> <br />
<tr class="r5"> <br />
<td class="c1">r5 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r5 c3</td> <br />
<td class="c4">4</td> <br />
</tr><br />
</tbody> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Interior column border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
table {<br />
border-collapse: collapse;<br />
} <br />
#t1 * .c2 {<br />
border-left: 1px dotted black;<br />
}<br />
#t1 {<br />
border-top: 1px solid black;<br />
} <br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
<br />
<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==rowspans and colspans merge the specified number of cells vertically or horizontally==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<head><br />
<title> - Tables</title><br />
</head><br />
<body><br />
<table border = "1"><br />
<thead><br />
<tr><br />
<!-- merge two rows --><br />
<th rowspan = "2"><br />
Picture<br />
</th><br />
<!-- merge four columns --><br />
<th colspan = "4" valign = "top"><br />
<h1>this is a test. </h1><br /><br />
</th><br />
</tr><br />
<tr valign = "bottom"><br />
<th>#</th><br />
<th>I</th><br />
<th>S</th><br />
<th>P</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<th>C</th><br />
<td>2</td><br />
<td>A</td><br />
<td rowspan = "2">L</td><br />
<td rowspan = "2">L</td><br />
</tr><br />
<tr><br />
<th>L</th><br />
<td>1</td><br />
<td>A</td><br />
</tr><br />
</tbody><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Selecting cells in column==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
<br />
#t1 * .c3 {<br />
display: none;<br />
} <br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<thead> <br />
<tr class="r1"> <br />
<td class="c1">c1</td> <br />
<td class="c2">c2</td> <br />
<td class="c3">c3</td> <br />
<td class="c4">c4</td> <br />
<td class="c5">c5</td> <br />
<td class="c6">c6</td> <br />
</tr><br />
</thead> <br />
<tfoot> <br />
<tr class="r3"> <br />
<td class="c1">c1</td> <br />
<td class="c2">c2</td> <br />
<td class="c3">c3</td> <br />
<td class="c4">c4</td> <br />
<td class="c5">c5</td> <br />
<td class="c6">c6</td> <br />
</tr><br />
</tfoot> <br />
<tbody class="b1"> <br />
<tr class="r2"> <br />
<td class="c1">r2 c1</td> <br />
<td class="c2">c2</td> <br />
<td class="c3">c3</td> <br />
<td class="c4">c4</td> <br />
<td class="c5">c5</td> <br />
<td class="c6">c6</td> <br />
</tr><br />
</tbody> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Table with column span 2==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<HTML><br />
<HEAD><br />
<TITLE></TITLE><br />
</HEAD><br />
<BODY><br />
<TABLE ID=mytable BORDER=1 WIDTH=250><br />
<TR><br />
<TD COLSPAN=2><br />
Some text.<br />
</TD><br />
</TR><br />
<TR><br />
<TD><br />
Some more text.<br />
</TD><br />
<TD><br />
Yet some more text.<br />
</TD><br />
</TR><br />
</TABLE><br />
</BODY><br />
</HTML><br />
</source><br />
<br />
<br />
<br />
<br />
==Table with number column==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title>Hummus</title><br />
<style type="text/css" media="all"><br />
table {<br />
border-width: 0px;<br />
width: 500px;<br />
}<br />
th {<br />
background: #ccc;<br />
color: white;<br />
}<br />
tfoot td {<br />
background: #808080;<br />
color: white;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<thead><br />
<tr><br />
<th colspan="4"><br />
H<br />
</th><br />
</tr><br />
<tr><br />
<th><br />
#<br />
</th><br />
<th><br />
M<br />
</th><br />
<th><br />
P<br />
</th><br />
<th><br />
I<br />
</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>1</td><br />
<td>#</td><br />
<td>C</td><br />
<td>D</td><br />
</tr><br />
<tr><br />
<td>15</td><br />
<td>C</td><br />
<td colspan="2">F</td><br />
</tr><br />
<tr><br />
<td>2</td><br />
<td>T</td><br />
<td colspan="2">S</td><br />
</tr><br />
<tr><br />
<td>8</td><br />
<td>T</td><br />
<td colspan="2">R</td><br />
</tr><br />
<tr><br />
<td>2</td><br />
<td>C</td><br />
<td colspan="2">T</td><br />
</tr><br />
<tr><br />
<td>2</td><br />
<td>T</td><br />
<td>P</td><br />
<td>C</td><br />
</tr><br />
</tbody><br />
<tfoot><br />
<tr><br />
<td colspan="4"><br />
this is a test. <br />
</td><br />
</tr><br />
</tfoot><br />
</table><br />
</body><br />
</html><br />
</source></div>
Admin