CSS: Html Tags td padding
Table cell padding
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS Example</title> <style rel="stylesheet" type="text/css"> td,th { padding: 5px; } </style> </head> <body> <table> <caption>Font properties</caption> <tr> <th>Property</th> <th>Purpose</th> </tr> <tr> <td class="code">font-family</td> <td>Specifies the font used.</td> </tr> <tr> <td class="code">font-size</td> <td>Specifies the size of the font used.</td> </tr> <tr> <td class="code">font-style</td> <td>Specifies whether the font should be normal, italic, or oblique.</td> </tr> <tr> <td class="code">font-weight</td> <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td> </tr> </table> </body> </html>
td padding:20px;
<html> <head> <title>A CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> body {font-family:arial, verdana, sans-serif;} table, th, td {border:solid 2px #000000;} table{margin:15px;} th, td{padding:20px;} </style> </head> <body> <p>This example shows how whitespace can make a page much easier to read. It is not Strict XHTML 1.0 beacuse it does not use a <p> element to contain the text here before and after the table. The following table contains some test text to make a point.</p> <table> <tr> <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</td> <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</td> </tr> </table> <p>If the <p> element were used the browser would likely add in some whitespace by itself. There is also real improvement, however, from adding padding to the <td> and <th> elements.</p> </body> </html>
td, th, caption padding: 5px;
<html>
<head>
<title> My favorite records </title>
<style>
* {
font-family: monospace;
}
body {
margin: 0;
}
table {
width: 100%;
border: thin solid black;
caption-side: bottom;
}
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 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> This is a test. </td>
<td> This is a test. </td>
<td> 1965 </td>
</tr>
<tr>
<td> This is a test. </td>
<td> This is a test. </td>
<td> 1967 </td>
</tr>
<tr>
<td> Queen II </td>
<td> Queen </td>
<td> 1974 </td>
</tr>
<tr>
<td> Sone </td>
<td> Music </td>
<td> 1995 </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> album </td>
<td> artist </td>
<td> released </td>
</tr>
</tfoot>
</table>
</body>
</html>
td padding: 7px;
<head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> table { border: 1px solid #d8d8d8; border-collapse: collapse; line-height: 1.3em; width: 95%; margin: 0 0 16px; padding: 0; } caption { font-size: 1.5em; font-weight: 400; margin: 0; padding: 6px 0 8px; text-align: left; } th { background: url(img/menubg2.gif) repeat-x bottom left #eaeaea; color: #505050; padding: 7px; text-align: left; } td { background: url(img/menubg.gif) repeat-x bottom left #f4f4f4; color: #303030; font-size: 0.9em; padding: 7px; text-align: left; } </style> </head> <body> <div id="footer"> <table><caption>caption</caption><tr><td>this is a test</td></tr></table> </div> </body> </html>
td padding: 2px;
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <title>:first-child</title> <style type='text/css'> body { font-size: 12px sans-serif; } table { background: slateblue; color: #fff; width: 100%; border-collapse: collapse; border: 1px solid mediumslateblue; } td { border: 1px solid darkslateblue; padding: 2px; } th { background: lightsteelblue; color: darkslateblue; font-size: 18px; text-align: left; } table tbody tr:first-child td { background: mediumslateblue; } </style> </head> <body> <h1>Discography</h1> <table> <thead> <tr> <th>Album</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>A</td> <td>March 1963</td> </tr> <tr> <td>B</td> <td>November 1963</td> </tr> <tr> <td>C</td> <td>July 1964</td> </tr> <tr> <td>D</td> <td>December 1964</td> </tr> </tbody> </table> </body> </html>
td padding: 5px;
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Spotlight | A Free CSS Template by RamblingSoul</title> <style type='text/css'> table { width: 95%; background:red; border: 1px solid #C5B798; margin-top: 15px; margin-bottom: 25px; } td { border-bottom: 1px solid #CDC1A7; padding: 5px; } th { font-family: "Trebuchet MS", Arial, Verdana; font-size: 14px; padding: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CDC1A7; background-color: #CDC1A7; color: #993300; } </style> </head> <body> <table cellspacing="0" cellpadding="3"> <tr> <th scope="col">Lorem Ipsum</th> <th scope="col">Dolor Sit</th> <th scope="col">Lorem</th> <th scope="col">Ipsum </th> <th scope="col">Dolor</th> </tr> <tr class="alttr1"> <th scope="row">ABCD</th> <td>Noman's Land</td> <td>1989</td> <td>1200</td> <td>200%</td> </tr> <tr class="alttr2"> <th scope="row">XYZ</th> <td>Nobody Home</td> <td>1941</td> <td>120</td> <td>50%</td> </tr> <tr class="alttr1"> <th scope="row">ABCD</th> <td>Noman's Land</td> <td>1989</td> <td>1200</td> <td>200%</td> </tr> <tr class="alttr2"> <th scope="row">XYZ</th> <td>Nobody Home</td> <td>1941</td> <td>120</td> <td>50%</td> </tr> <tr class="alttr1"> <th scope="row">ABCD</th> <td>Noman's Land</td> <td>1989</td> <td>1200</td> <td>200%</td> </tr> <tr class="alttr2"> <th scope="row">XYZ</th> <td>Nobody Home</td> <td>1941</td> <td>120</td> <td>50%</td> </tr> </table> </body> </html>
td padding: 0; margin: 0;
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> table { border-collapse: collapse; border: 1px solid black; } th { border: 1px solid black; width: 6em; } td { width:6em; border: 1px solid black; } th { border: 1px solid black; width: 6em; } td { width:6em; border: 1px solid black; padding: 0; margin: 0; } input { width: 100%; border: none; margin: 0; } .save { margin-top: 1em; width: 5em; } input { width: 100%; border: none; margin: 0; text-align: right; } </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">ing Grades </th> <th scope="col">Number of Presentators </th> </tr> <tr> <th scope="row">1999</th> <td><input type="text" name="1999" /></td> <td><input type="text" name="1999" /></td> <td><input type="text" name="1999" /></td> </tr> <tr> <th scope="row">2000</th> <td><input type="text" name="2000" /></td> <td><input type="text" name="2000" /></td> <td><input type="text" name="2000" /></td> </tr> <tr> <th scope="row">2001</th> <td><input type="text" name="2001" /></td> <td><input type="text" name="2001" /></td> <td><input type="text" name="2001" /></td> </tr> <tr> <th scope="row">2002</th> <td><input type="text" name="2002" /></td> <td><input type="text" name="2002" /></td> <td><input type="text" name="2002" /></td> </tr> <tr> <th scope="row">2003</th> <td><input type="text" name="2003" /></td> <td><input type="text" name="2003" /></td> <td><input type="text" name="2003" /></td> </tr> <tr> <th scope="row">2004</th> <td><input type="text" name="2004" /></td> <td><input type="text" name="2004" /></td> <td><input type="text" name="2004" /></td> </tr> </table> <input type="submit" class="save" value="Save" /> </form> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="Description" content="Information architecture, Web Design, Web Standards." /> <meta name="Keywords" content="your, keywords" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Distribution" content="Global" /> <meta name="Author" content="Erwin Aligam - ealigam@gmail.com" /> <meta name="Robots" content="index,follow" /> <style type='text/css'> /* start - table */ table { border-collapse: collapse; margin: 10px; } th strong { color: #fff; } th { background: #e7e6e6 url(MarketPlace-images/button.jpg) repeat-x; height: 29px; padding-left: 12px; padding-right: 12px; text-align: left; border-left: 1px solid #f4f4f4; border-bottom: solid 2px #fff; color: #333; } tr { height: 30px; } td { padding-left: 11px; padding-right: 11px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; } td.first,th.first { border-left: 0px; } tr.row-a { background: #F8F8F8; } tr.row-b { background: #EFEFEF; } /* end - table */ </style> <title>Marketplace</title> </head> <body> <!-- wrap starts here --> <div id="wrap"> <h3>Table Styling</h3> <table> <tr> <th class="first">post date</th> <th>title</th> <th>description</th> </tr> <tr class="row-a"> <td class="first">04.18.2007</td> <td><a href="index.html">Augue non nibh</a></td> <td><a href="index.html">Lobortis commodo metus vestibulum</a></td> </tr> <tr class="row-b"> <td class="first">04.18.2007</td> <td><a href="index.html">Fusce ut diam bibendum</a></td> <td><a href="index.html">Purus in eget odio in sapien</a></td> </tr> <tr class="row-a"> <td class="first">04.18.2007</td> <td><a href="index.html">Maecenas et ipsum</a></td> <td><a href="index.html">Adipiscing blandit quisque eros</a></td> </tr> <tr class="row-b"> <td class="first">04.18.2007</td> <td><a href="index.html">Sed vestibulum blandit</a></td> <td><a href="index.html">Cras lobortis commodo metus lorem</a></td> </tr> </table> </div> </body> </html>
td padding-left: 11px;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="Description" content="Information architecture, Web Design, Web Standards." /> <meta name="Keywords" content="your, keywords" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Distribution" content="Global" /> <meta name="Author" content="Erwin Aligam - ealigam@gmail.com" /> <meta name="Robots" content="index,follow" /> <style type='text/css'> /* start - table */ table { border-collapse: collapse; margin: 10px; } th strong { color: #fff; } th { background: #e7e6e6 url(MarketPlace-images/button.jpg) repeat-x; height: 29px; padding-left: 12px; padding-right: 12px; text-align: left; border-left: 1px solid #f4f4f4; border-bottom: solid 2px #fff; color: #333; } tr { height: 30px; } td { padding-left: 11px; padding-right: 11px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; } td.first,th.first { border-left: 0px; } tr.row-a { background: #F8F8F8; } tr.row-b { background: #EFEFEF; } /* end - table */ </style> <title>Marketplace</title> </head> <body> <!-- wrap starts here --> <div id="wrap"> <h3>Table Styling</h3> <table> <tr> <th class="first">post date</th> <th>title</th> <th>description</th> </tr> <tr class="row-a"> <td class="first">04.18.2007</td> <td><a href="index.html">Augue non nibh</a></td> <td><a href="index.html">Lobortis commodo metus vestibulum</a></td> </tr> <tr class="row-b"> <td class="first">04.18.2007</td> <td><a href="index.html">Fusce ut diam bibendum</a></td> <td><a href="index.html">Purus in eget odio in sapien</a></td> </tr> <tr class="row-a"> <td class="first">04.18.2007</td> <td><a href="index.html">Maecenas et ipsum</a></td> <td><a href="index.html">Adipiscing blandit quisque eros</a></td> </tr> <tr class="row-b"> <td class="first">04.18.2007</td> <td><a href="index.html">Sed vestibulum blandit</a></td> <td><a href="index.html">Cras lobortis commodo metus lorem</a></td> </tr> </table> </div> </body> </html>
Cell padding<html>
<head>
<title> My favorite records </title>
<style rel='stylesheet' type='text/css'>
table {
width: 100%;
border: thin solid black;
border-collapse: collapse;
}
td {
border: thin solid black;
}
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>
My favorite records.
</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th> a</th>
<th> a</th>
<th> r</th>
</tr>
</thead>
<tbody>
<tr>
<td> R</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> a</td>
<td> a</td>
<td> r</td>
</tr>
</tfoot>
</table>
</body>
</html>