1 / 10

HTML Tables

HTML Tables. Summer Smith. <table>. The <table> tag is useful for organizing information in a grid layout. Content is added to a <table> using sub-tags. < th > - this is the table header tag, and creates a bolded header in your table. < th > elements are centered by default.

gyala
Download Presentation

HTML Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Tables Summer Smith

  2. <table> • The <table> tag is useful for organizing information in a grid layout. • Content is added to a <table> using sub-tags. • <th> - this is the table header tag, and creates a bolded header in your table. <th> elements are centered by default. • <tr> - this is the table row tag. It divides the table into rows. • <td> - this is the table data tag. It divides data into cells. DO NOT use empty <td> elements to create white space or padding- this should be done with CSS.

  3. Basic table html output

  4. <table border="1" style="border-collapse:collapse"> <table border=“1“> Border Adding the border attribute creates a border around the table The styling attribute “border-collapse” allows you to create a one-line border. <table border=“8“>

  5. Setting table width <table border=“1“ style=“width:300px”> Setting the width of the table can help space the data to make the information clearer. <table style=“width:300px”>

  6. Adding a caption The <caption> element allows you to add a title to your table.

  7. <tr> <td<Princess Peach</td> </tr> Spanning The colspan and rowspan attributes allow one cell to span multiple columns or rows. A cell cannot span more rows or columns than are contained in the table. <tr> <td colspan="2"> Princess Peach</td> </tr> <tr> <td colspan=“4"> Princess Peach</td> </tr>

  8. <table style="width:300px; border-color:orchid;" border="1"> <tr style="background-color:orange; color:white"> <th>First Name</th> <th>Last Name</th> <th>Age</th> </tr> <tr style="color:blue"> <td>Flynn</td> <td>Rider</td> <td>24</td> </tr> <tr> <td style="background-color:lightGreen; color:salmon;">Prince</td> <td>Humperdink</td> <td>36</td> </tr> <tr> <td>Hermione</td> <td style="text-align:right">Granger</td> <td>17</td> </tr> </table> Styling tables You can style specific <tr>, <th>, and <td> elements individually using inline styles. Tables can be styled by element or as a whole using an external Cascading Style Sheet.

  9. CSS added: td { padding: 15px; } Padding cells Using CSS, you can manipulate the padding to change the look of the table. You can also customize the width and height of a table using CSS. CSS added: th { height: 50px; } CSS added: th { width:150px; }

  10. Helpful Resources The basics of Tables: http://www.w3schools.com/html/html_tables.asp https://computerservices.temple.edu/creating-tables-html https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table Styling tables: http://www.w3schools.com/css/css_table.asp More on <table> attributes: http://www.w3schools.com/tags/tag_table.asp

More Related