HTML/CSS/Table Style/table data
Содержание
- 1 Add different cell space
- 2 empty-cells: hide
- 3 Set margin and padding for td tag
- 4 Set style for an anchor in table cell
- 5 Set style for image in a table cell
- 6 Set td tag to have border: 1px solid black, width:6em
- 7 Table and table cell backgrounds
- 8 Table border and table header, cell border
- 9 table cell alignment
- 10 Table cell padding
- 11 table cells with vertical alignment
- 12 Table cell with dashed black border
- 13 Table cell with different class
- 14 Table cell with line height setting
- 15 Table cell with vertical-align: baseline
- 16 Table cell with vertical-align: top
- 17 td:empty
- 18 Use table cell border to highlight total
Add different cell space
<?xml version="1.0" encoding="utf-8"?>
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Vertical alignment examples</title>
<style type="text/css" media="all">
table {
font: 1em/1.5em Georgia, serif;
border: 1px solid black;
margin: 1em 1em 0 1em;
}
p.extraSpace {
margin: 1.5em 0 0 0;
}
p.lessSpace {
margin: 0.5em 0 0 0;
}
table.type3 p {
margin: 0;
padding: 0.75em 0;
}
table.type3 td.two p {
padding: 0.5em 0;
}
table.type3 td.three p {
padding: 1em 0;
}
</style>
</head>
<body>
<table class="type2">
<tr>
<td>this is a test. </td>
<td class="two"><p>this is a test. </p></td>
<td class="three">this is a test. </td>
</tr>
</table>
<table class="type2">
<tr>
<td><p>this is a test. </p></td>
<td class="two"><p>this is a test. </p></td>
<td class="three"><p>this is a test. </p></td>
</tr>
</table>
<table class="type2">
<tr>
<td><p>Lorem ipsum dolor</p></td>
<td class="two"><p>this is a test. </p></td>
<td class="three"><p class="extraSpace">this is a test. </p></td>
</tr>
</table>
<table class="type2">
<tr>
<td><p>Lorem ipsum dolor</p></td>
<td class="two"><p>Lorem ipsum dolor</p></td>
<td class="three"><p class="lessSpace">Lorem ipsum dolor</p></td>
</tr>
</table>
<table class="type3">
<tr>
<td><p>Lorem ipsum dolor</p></td>
<td class="two"><p>Lorem ipsum dolor</p></td>
<td class="three"><p>Lorem ipsum dolor</p></td>
</tr>
</table>
<table class="type3">
<tr>
<td><p>Lorem ipsum dolor</p></td>
<td class="two"><p>Lorem ipsum dolor</p></td>
<td class="three">Lorem ipsum dolor</td>
</tr>
</table>
</body>
</html>
empty-cells: hide
<!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;
empty-cells: hide;
}
td:empty {
background: gray;
}
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>
<table>
<caption>
Table: My favorite records.
</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th> Column 1</th>
<th> Column 2</th>
<th> Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td> R</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td> B</td>
<td> V</td>
<td> 1</td>
</tr>
<tr>
<td> Q</td>
<td> Q</td>
<td> 1</td>
</tr>
<tr>
<td> M</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Column 1</td>
<td> Column 2</td>
<td> Column 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
Set margin and padding for td tag
<!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></title>
<style type="text/css">
td {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<form method="get" name="copresentations">
<table cellspacing="0">
<caption>
Summary of Financial Data
</caption>
<tr>
<th scope="col">Fiscal Year </th>
<th scope="col">Worksite<br />
Presentations </th>
<th scope="col">Passing Grades </th>
<th scope="col">Number of Presentators </th>
</tr>
<tr>
<th scope="row">2003</th>
<td><input type="text" name="w2003" /></td>
<td><input type="text" name="p2003" /></td>
<td><input type="text" name="n2003" /></td>
</tr>
<tr>
<th scope="row">2004</th>
<td><input type="text" name="w2004" /></td>
<td><input type="text" name="p2004" /></td>
<td><input type="text" name="n2004" /></td>
</tr>
</table>
<input type="submit" class="save" value="Save" />
</form>
</body>
</html>
Set style for an anchor in table cell
<!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></title>
<style type="text/css">
td a {
display: block;
background-color: #333;
color: white;
text-decoration: none;
padding: 4px;
}
</style>
</head>
<body>
<table cellspacing="15">
<tr>
<th colspan="2">
General
</th>
</tr>
<tr>
<th>
</th>
<th>
Estimate
</th>
</tr>
<tr>
<td>
<a href=" ">Total population</a>
</td>
<td>
272,091
</td>
</tr>
</table>
</body>
</html>
Set style for image in a table cell
<!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></title>
<style type="text/css">
td img {
display: block;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src="bkgd.jpg" alt=" " /></td>
</table>
</body>
</html>
Set td tag to have border: 1px solid black, width:6em
<!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></title>
<style type="text/css">
td {
width:6em;
border: 1px solid black;
}
</style>
</head>
<body>
<form method="get" name="copresentations">
<table cellspacing="0">
<caption>
Summary of Financial Data
</caption>
<tr>
<th scope="col">Fiscal Year </th>
<th scope="col">Worksite<br />
Presentations </th>
<th scope="col">Passing Grades </th>
<th scope="col">Number of Presentators </th>
</tr>
<tr>
<th scope="row">2003</th>
<td><input type="text" name="w2003" /></td>
<td><input type="text" name="p2003" /></td>
<td><input type="text" name="n2003" /></td>
</tr>
<tr>
<th scope="row">2004</th>
<td><input type="text" name="w2004" /></td>
<td><input type="text" name="p2004" /></td>
<td><input type="text" name="n2004" /></td>
</tr>
</table>
<input type="submit" class="save" value="Save" />
</form>
</body>
</html>
Table and table cell backgrounds
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Table and table cell backgrounds</title>
<style type="text/css" media="all">
table {
font: 1em/1.5em Georgia, serif;
background-color: rgb(230,230,230);
border: 1px solid black;
margin: 1em;
border-collapse: separated;
}
td {
vertical-align: baseline;
padding: 0 0.5em;
border: 1px dashed black;
}
td.background {
background-color: rgb(200,200,200);
}
</style>
</head>
<body>
<table>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td class="background">Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td class="background">Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td class="background">Lorem ipsum dolor</td>
</tr>
</table>
</body>
</html>
Table border and table header, cell 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
div {
margin-bottom: 30px;
}
#divID table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
#divID th, #divID td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
</style>
</head>
<body>
<div id="divID">
<table summary="Summary goes here">
<caption>This is the title of the table</caption>
<tr>
<th>Year</th>
<th>Opponent</th>
<th>Item 3</th>
</tr>
<tr>
<td>1918</td>
<td>Item A</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>Item B</td>
<td>91-63</td>
</tr>
<tr>
<td>1915</td>
<td>Item C</td>
<td>101-50</td>
</tr>
<tr>
<td>1912</td>
<td>Item D</td>
<td>105-47</td>
</tr>
</table>
</div>
</body>
</html>
table cell alignment
<?xml version"1.0" encoding="UTF-8"?>
<!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>Adding Text Alignmnet</title>
<style type="text/css">
td {border:1px solid black;}
table {border:1px solid black;}
td.number{text-align: right;color: blue;}
td.text{text-align: left;}
</style>
</head>
<body>
<table summary="This table">
<caption>Our Pizza Selections</caption>
<thead>
<tr>
<th scope="col">Pizza Type</th>
<th scope="col">Small</th>
<th scope="col">Medium</th>
<th scope="col">Large</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text" scope="row">Thin Crust</td>
<td class="number">3.99</td>
<td class="number">4.99</td>
<td class="number">6.99</td>
</tr>
<tr>
<td class="text" scope="row">Deep Dish</td>
<td class="number">4.99</td>
<td class="number">6.99</td>
<td class="number">8.99</td>
</tr>
<tr>
<td class="text" scope="row">Stuffed Crust</td>
<td class="number">5.99</td>
<td class="number">7.99</td>
<td class="number">9.99</td>
</tr>
</tbody>
</table>
</body>
</html>
Table cell padding
<!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">
body {
margin: 0;
}
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>
<table>
<caption>
Table: My favorite records.
</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th> Column 1</th>
<th> Column 2</th>
<th> Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td> R</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td> B</td>
<td> V</td>
<td> 1</td>
</tr>
<tr>
<td> Q</td>
<td> Q</td>
<td> 1</td>
</tr>
<tr>
<td> M</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Column 1</td>
<td> Column 2</td>
<td> Column 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
table cells with vertical alignment
<!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 {
font: 16px sans-serif;
border: 1px solid black;
}
td {
border: 1px solid black;
width: 125px;
}
td.baseline {
vertical-align: baseline;
}
td#largefont {
font-size: 60px;
vertical-align: baseline;
}
td#top {
vertical-align: top;
}
td#middle {
vertical-align: middle;
}
td#bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<td class="baseline">
The contents of this cell
are aligned to the baseline.
</td>
<td class="baseline" id="largefont">
L
</td>
<td id="top">
The contents of this cell
are top aligned.
</td>
<td id="middle">
The contents of this
cell are middle aligned.
</td>
<td id="bottom">
The contents of this
cell are bottom aligned.
</td>
</tr>
</table>
</body>
</html>
Table cell with dashed black 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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Vertical alignment across a table row using vertical-align: baseline</title>
<style type="text/css" media="all">
table {
font: 1em/1.5em Georgia, serif;
border: 1px solid black;
margin: 1em 1em 0 1em;
}
td {
width: 10em;
line-height: 1.5em;
padding: 0.25em;
border: 1px dashed black;
}
table.type1 td {
vertical-align: top;
}
table.type2 td {
vertical-align: baseline;
}
td.two {
line-height: 2.5em;
}
td.three {
line-height: 2em;
}
</style>
</head>
<body>
<table class="type1">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
<table class="type2">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
</body>
</html>
Table cell with different class
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Vertical alignment across a table row using vertical-align: baseline</title>
<style type="text/css" media="all">
table {
font: 1em/1.5em Georgia, serif;
border: 1px solid black;
margin: 1em 1em 0 1em;
}
table.type1 td {
vertical-align: top;
}
table.type2 td {
vertical-align: baseline;
}
td.two {
line-height: 2.5em;
}
td.three {
line-height: 2em;
}
</style>
</head>
<body>
<table class="type1">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
<table class="type2">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
</body>
</html>
Table cell with line height setting
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Vertical alignment across a table row using vertical-align: baseline</title>
<style type="text/css" media="all">
table {
font: 1em/1.5em Georgia, serif;
border: 1px solid black;
margin: 1em 1em 0 1em;
}
td {
width: 10em;
line-height: 1.5em;
padding: 0.25em;
border: 1px dashed black;
}
table.type1 td {
vertical-align: top;
}
table.type2 td {
vertical-align: baseline;
}
td.two {
line-height: 2.5em;
}
td.three {
line-height: 2em;
}
</style>
</head>
<body>
<table class="type1">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
<table class="type2">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
</body>
</html>
Table cell with vertical-align: baseline
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Vertical alignment across a table row using vertical-align: baseline</title>
<style type="text/css" media="all">
table {
font: 1em/1.5em Georgia, serif;
border: 1px solid black;
margin: 1em 1em 0 1em;
}
td {
width: 10em;
line-height: 1.5em;
padding: 0.25em;
border: 1px dashed black;
}
table.type1 td {
vertical-align: top;
}
table.type2 td {
vertical-align: baseline;
}
td.two {
line-height: 2.5em;
}
td.three {
line-height: 2em;
}
</style>
</head>
<body>
<table class="type1">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
<table class="type2">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
</body>
</html>
Table cell with vertical-align: top
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Vertical alignment across a table row using vertical-align: baseline</title>
<style type="text/css" media="all">
table {
font: 1em/1.5em Georgia, serif;
border: 1px solid black;
margin: 1em 1em 0 1em;
}
td {
width: 10em;
line-height: 1.5em;
padding: 0.25em;
border: 1px dashed black;
}
table.type1 td {
vertical-align: top;
}
table.type2 td {
vertical-align: baseline;
}
td.two {
line-height: 2.5em;
}
td.three {
line-height: 2em;
}
</style>
</head>
<body>
<table class="type1">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
<table class="type2">
<tr>
<td>this is a test. </td>
<td class="two">this is a test. </td>
<td class="three">this is a test. </td>
</tr>
</table>
</body>
</html>
td:empty
<!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">
body {
margin: 0;
}
table {
width: 100%;
border: thin solid black;
}
td:empty {
background: gray;
}
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>
<table>
<caption>
Table: My favorite records.
</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th> Column 1</th>
<th> Column 2</th>
<th> Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td> R</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td> B</td>
<td> V</td>
<td> 1</td>
</tr>
<tr>
<td> Q</td>
<td> Q</td>
<td> 1</td>
</tr>
<tr>
<td> M</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Column 1</td>
<td> Column 2</td>
<td> Column 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
Use table cell border to highlight total
<!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></title>
<style type="text/css">
table {
border-collapse: collapse;
border: 5px solid #444;
}
td {
padding: 4px;
}
th {
color: white;
background-color: #00B3FF;
}
td, th+th {
border: 2px solid #666;
}
td+td {
border: 2px solid #ccc;
text-align: center;
}
td#winner {
border: 5px dotted #999;
}
</style>
</head>
<body>
<table cellspacing="15">
<tr>
<th colspan="4">General</th>
</tr>
<tr>
<th></th>
<th>Estimate</th>
<th>Lower Bound</th>
<th>Upper Bound</th>
</tr>
<tr>
<td>Total population</td>
<td>272,091</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td colspan="4">Sex</td>
</tr>
<tr>
<td>Male</td>
<td>129,179</td>
<td>127,670</td>
<td>131,908</td>
</tr>
<tr>
<td>Female</td>
<td id="winner">142,302</td>
<td>140,183</td>
<td>144,421</td>
</tr>
</table>
</body>
</html>