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