Tables can be used to lay out information in a clear and easily understandable format, displayed on rows and columns.
The <style> tag from the examples presented in this tutorial must be added in the <head> are of the webpage.
Tables are created with the <table> ... </table>
tag. A table contains rows and columns.
- The rows are created with the <tr>
tag.
- Table cells (that form the columns) are defined with the <td>
tag, within the <tr> element.
- In HTML5 the style, alignamennt and tables design is made with CSS; see the tutorial: Styling HTML table with CSS.
<style> table, th, td { border: 1px solid #000; } </style> <h4>Example HTML table</h4> <table> <tr> <td>Row 1 - Column 1</td> <td>Row 1 - Column 2</td> </tr> <tr> <td>Row 2 - Column 1</td> <td>Row 2 - Column 2</td> </tr> </table>
To align a table in webpage use CSS style.
<table style='margin:1px auto;'>
<table style='margin-left:0;'>
<table style='margin:margin:1px 0 1px auto;'>
<style> table { border: 1px solid #000; margin:5px auto; text-align:center; } </style> <h4>Centered table with HTML elements in TD</h4> <table> <tr><td> <p>This is a paragraph,<br> next, an image.</p> <img src='../imgs/smile_gift.png' alt='Smile' width='150' height='132' /> </td></tr> </table>
The table element contains also other tags to form the table structure, used to group the rows and the columns.
<style> table { border-collapse: collapse; margin:5px auto; text-align:center; } table, th, td { border: 1px solid #000; } </style> <h4>Centered table, with th, rowspan, and colspan</h4> <table> <tr> <th>Title 1</th> <th>Title 2</th> </tr> <tr> <td>Row 2 - Cell 1</td> <td>Row 2 - Cell 2</td> </tr> <tr> <td colspan='2'>Row 3 - Cells 1 and 2</td> </tr> <tr> <td rowspan='2'>Rows 4 and 5 - Cell 1</td> <td>Row 4 - Cell 2</td> </tr> <tr> <td>Row 5 - Cell 2</td> </tr> </table>
<style> table { border-collapse: collapse; margin:5px auto; } table, th, td { border: 1px solid #000; } </style> <h4>Table with thead, tfoot, tbody </h4> <p>Here, the thead, tbody and tfoot sections are defined with different background colors.</p> <table> <thead style='background:#b8b8f8;'> <tr> <th>Web site</th> <th>Description</th> </tr> </thead> <tfoot style='background:#b0d8b0; text-align:center;'> <tr> <td colspan='2'>Web sites with free resources.</td> </tr> </tfoot> <tbody style='background:#ff0;'> <tr> <td>marplo.net</td> <td>Web development, foreign languages, forum.</td> </tr> <tr> <td>coursesweb.net</td> <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript.</td> </tr> </tbody> </table>
<style> table { border-collapse: collapse; margin:5px auto; } table, th, td { border: 1px solid #000; } </style> <h4>Example colgroup</h4> <p>Table with two colgroup. The first 'colgroup' sets the style of the first column (the ID).</p> <table> <colgroup style='background:#b9d9b9; width:50px;'></colgroup> <colgroup span='2' style='background-color:#d8d8fb;'> </colgroup> <tr style='background:#e0e0e0;'> <th>ID</th> <th>Web site</th> <th>Description</th> </tr> <tr> <td>01</td> <td>marplo.net</td> <td>Web development, foreign languages, anime and games</td> </tr> <tr> <td>02</td> <td>coursesweb.net</td> <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td> </tr> </table>
caption
is displayed (top /bottom) is defined with the CSS caption-side
property, applyed to the table element. Default is 'top'.<style> table { border-collapse: collapse; caption-side:bottom; } table, th, td { border: 1px solid #000; } margin:5px auto; </style> <h4>Table caption</h4> <table> <caption>Caption - <strong>Free Web Development resources</strong></caption> <tr style='background-color:#deedfe;'> <th>Web site</th> <th>Description</th> </tr> <tr> <td>marplo.net</td> <td>Web development, foreign languages, anime and games</td> </tr> <tr> <td>coursesweb.net</td> <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td> </tr> </table>
<input type="checkbox" name="a_name" value="value" checked="checked" />
#id { background:url("path_to_image.png"); background-size:contain; background-repeat:no-repeat; }
var rest8_7 = 8 % 7; alert(rest8_7);
$nr = ceil(3.5); echo $nr; // 4