1 / 27

HTML Table Structures for Websites

Explore different types of tables with borders, headers, blank cells, and spanning columns or rows. Easily create organized and structured tables for your website using HTML.

lawrencia-benedict
Télécharger la présentation

HTML Table Structures for Websites

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. Tables

  2. Basic Table Structure <table border="1">    <tr>       <td>Row 1, Col 1</td>       <td>Row 1, Col 2</td>       <td>Row 1, Col 3</td>    </tr>    <tr>       <td>Row 2, Col 1</td>       <td>Row 2, Col 2</td>       <td>Row 2, Col 3</td>    </tr> </table>

  3. Column Header

  4. Column Header (HTML) <table border="1">   <tr>       <th>Column 1</th>       <th>Column 2</th>       <th>Column 3</th>    </tr> <tr>       <td>Row 1, Col 1</td>       <td>Row 1, Col 2</td>       <td>Row 1, Col 3</td>    </tr>    <tr>       <td>Row 2, Col 1</td>       <td>Row 2, Col 2</td>       <td>Row 2, Col 3</td>    </tr> </table>

  5. Table with No Border

  6. Table with No Borders (HTML) <table border=“0">   <tr>       <th>January</th>       <th>February</th>       <th>March</th>    </tr> <tr>       <td>$123.45</td>       <td>$234.56</td>       <td>$345.67</td>    </tr>    <tr>       <td>$456.78</td>       <td>$567.89</td>       <td>$678.90</td>    </tr> </table>

  7. Table with Blank Cell

  8. Solution for Table with Blank Cell <table border=1> <tr> <th>January</th> <th>February</th> <th>March</th> </tr> <tr> <td>Adamson</td> <td>Benson</td> <td>Carson</td> </tr> <tr> <td>Dobson</td> <td> </td> <td>Erickson</td> </tr> <table> <td><br></td> or <td>&nbsp;</td>

  9. Table with Blank Cellwith Borders

  10. Table Title This Title Is Attached to the Table

  11. TableTitle (HTML) <table border=“0"> <caption><b>This title is attached to the table</b></caption>   <tr>       <th>Row 2, Col 1</th>       <th>Row 2, Col 2</th>       <th>Row 2, Col 3</th>    </tr> <tr>       <td>Row 3, Col 1</td>       <td>Row 3, Col 2</td>       <td>Row 3, Col 3</td>    </tr> </table>

  12. Spanning Columns

  13. <table border=“0">   <tr>       <th colspan=”2”>Cols 1 & 2</th>       <th colspan=“2”>Cols 3 & 4</th>    </tr> <tr>       <td>Row 2, Col 1</td>       <td>Row 2, Col 2</td>       <td>Row 2, Col 3</td>      <td>Row 2, Col 4</td>    </tr>    <tr>       <td>Row 3, Col 1</td>       <td>Row 3, Col 2</td>       <td>Row 3, Col 3</td>       <td>Row 3, Col 4</td>    </tr> </table> Spanning Columns (HTML)

  14. Spanning Rows

  15. Spanning Rows (HTML) <table border=“0">   <tr>       <td rowspan=”2”>Rows 1 & 2</td>       <td>Row 1, Col 2</td>       <td>Row 1, Col 3</td>    </tr> <tr>       <td>Row 2, Col 2</td>       <td>Row 2, Col 3</td>    </tr>    <tr>       <td rowspan=“2”>Row 3 & 4</td>       <td>Row 3, Col 2</td>       <td>Row 3, Col 3</td>    </tr> <tr>       <td>Row 4, Col 2</td>       <td>Row 4, Col 3</td>    </tr> </table>

  16. More Complex Table

  17. More Complex Table (HTML) <table border=“0">  <tr>    <th colspan=”2”><br></th>    <th colspan=“3”>First Quarter</th>    <th colspan=“3”>Second Quarter</th>  </tr> <tr>    <th>Team</th>    <th>Name</th>    <th>Jul</th>    <th>Aug</th>    <th>Sep</th>    <th>Oct</th>    <th>Nov</th>    <th>Dec</th>  </tr>

  18. More Complex Table (HTML) <tr> <td ROWSPAN=3>I</td> <td>Adachi</td> <td>111.11</td> <td>112.22</td> <td>113.33</td> <td>114.44</td> <td>115.55</td> <td>116.66</td> </tr> <tr> <td>Baskins</td> <td>211.11</td> <td>212.22</td> <td>213.33</td> <td>214.44</td> <td>215.55</td> <td>216.66</td> </tr>

  19. More Complex Table (HTML) <tr> <td>Chaplin</td> <td>311.11</td> <td>312.22</td> <td>313.33</td> <td>314.44</td> <td>315.55</td> <td>316.66</td> </tr> <tr> <td ROWSPAN=3>II</td> <td>Dixon</td> <td>411.11</td> <td>412.22</td> <td>413.33</td> <td>414.44</td> <td>415.55</td> <td>416.66</td> </tr>

  20. More Complex Table (HTML) <tr> <td>Encino</td> <td>511.11</td> <td>512.22</td> <td>513.33</td> <td>514.44</td> <td>515.55</td> <td>516.66</td> </tr> <tr> <td>Freeman</td> <td>611.11</td> <td>612.22</td> <td>613.33</td> <td>614.44</td> <td>615.55</td> <td>616.66</td> </tr></table>

  21. Controlling Width <table border=“1” width=“70%”> <tr> <th>ID</th> <th>Name</th> <th>Address</th> <th>Phone</th> </tr> <tr> <td>12345</td> <td>Alice Arrupe</td> <td>123 Apple Rd</td> . . . . . . . . or <table border=“1” width=“560”>

  22. Controlling Cell Width

  23. Controlling Cell Width <table border=“1” width=“500”> <tr> <th width=“5%”>ID</th> <th width=“30%”>Name</th> <th width=“55%”>Address</th> <th width=“10%”>Phone</th> </tr> <tr> <td>12345</td> <td>Alice Arrupe</td> <td>123 Apple Rd</td> <td>111-2121</td> </tr> <tr> <td>23456</td> <td>Bobbie Benton</td> ...

  24. Coloring the Table

  25. <table border=1> <tr bgcolor="orange"> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td bgcolor="yellow"> Row 2, Col 1</td> <td>Row 2, Col 2</td> <td>Row 2, Col 3</td> </tr> <tr> <td>Row 3, Col 1</td> <td>Row 3, Col 2</td> <td bgcolor=“green"> Row 3, Col 3</td> </tr> </table> Coloring the Table

  26. Page Layout

  27. Page Layout <table width="75%" border="0" bgcolor=“silver"> <tr> <td colspan=3> <font size=6 color=“white”>Sosa wins National League MVP over McGwire</font> </td> </tr> <tr> <td width="20%"></td>   <td width="60%"> <p> NEW YORK (AP) -- Sammy Sosa insisted all along that Mark McGwire ... rest of text. </td> <td width="20%"></td>  </tr> </table>

More Related