February 17Feb 17 Administrators HTML Tables HTML tables allow web developers to arrange data into rows and columns. Example Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italy Define an HTML Table A table in HTML consists of table cells inside rows and columns. Example A simple HTML table: <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr></table> Table Cells Each table cell is defined by a <td> and a </td> tag. td stands for table data. Everything between <td> and </td> is the content of a table cell. Example <table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr></table> Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc. Table Rows Each table row starts with a <tr> and ends with a </tr> tag. tr stands for table row. Example <table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr></table> You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row. Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter. Table Headers Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag: th stands for table header. Example Let the first row be table header cells: <table> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr></table> By default, the text in <th> elements are bold and centered, but you can change that with CSS. HTML Table Tags Tag Description <table> Defines a table <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <caption> Defines a table caption <colgroup> Specifies a group of one or more columns in a table for formatting <col> Specifies column properties for each column within a <colgroup> element <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table For a complete list of all available HTML tags, visit our HTML Tag Reference. Video: HTML Tables LEARN MORE Styling Tables Filter Table Sort Table Responsive Table Zebra Striped Table
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.