1 / 12

Learn Advanced and Basic HTML - Lesson 5

With HTML you can create your own Website. This tutorial teaches you everything about HTML. For full HTML course visit our website www.training-n-development.com

trainingdevelopment
Download Presentation

Learn Advanced and Basic HTML - Lesson 5

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. Learn HTML BasicsLesson No : 05 Publisher : Attitude Academy

  2. HTML Tables

  3. Defining HTML Tables <body> <table> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr><td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body>

  4. An HTML Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute: <body> <table border="1px"> <tr><td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr><td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr><td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body>

  5. HTML Table Headings Table headings are defined with the <th> tag. By default, all major browsers display table headings as bold and centered: <body> <table border="1px"> <tr><th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr><td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr><td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body>

  6. HTML Table Tag <body> <table border="1px"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tbody><tfoot> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </tfoot> </table> </body>

  7. Table Cells that Merge Many Columns To make a cell span more than one column, use the colspan attribute: <body> <h2>Cell that spans two columns:</h2> <table border="1px"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body>

  8. Table Cells that Merge Many Rows To make a cell span more than one row, use the rowspan attribute: <body> <h2>Cell that spans two rows:</h2> <table border="1px"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body>

  9. Cellpadding To make a cell span more , use the Cellpadding attribute: <body> <h2>Cell that spans two rows:</h2> <table border="1px" cellpadding="15px"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body>

  10. Table Cellspacing To make a cell span more than one row, use the Cellspacing attribute: <body> <h2>Cell that spans two rows:</h2> <table border="1px" cellspacing="20px"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body>

  11. PRACTICAL IMPLEMENTATION

  12. Visit Us : Attitude Academy

More Related