1 / 10

<table>s, <div>s, and <span>s

<table>s, <div>s, and <span>s. Web Page Design HTML. What are Tables?. We use them to store tabular data so it is easy to read To present information neatly in a table with rows and columns we use the <table> tag <table> </table>. Table Row & Table Data.

bluma
Télécharger la présentation

<table>s, <div>s, and <span>s

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. <table>s, <div>s, and <span>s Web Page Design HTML

  2. What are Tables? • We use them to store tabular data so it is easy to read • To present information neatly in a table with rows and columns we use the <table> tag • <table> </table>

  3. Table Row & Table Data • Use the <tr> tag to create a table row • <tr> </tr> • You determine the number of columns by telling the row how many cells to have • Use the <td> tag (table data) to add text to cells in columns . <td> determines columns

  4. Head of the Table • Just like our head and body in basic HTML, a table has a head and body too! • To make it look more like a table use the following tags: • <thead> and <tbody> • These tags go within the <table> tag

  5. Adding a Table Head & Naming Your Table 1) Create a table row <tr> </tr> 2) Create table header cells with <th> </th> To name your table across the top you use the colspan attribute: • <th colspan=“3”> 3 columns across!</th>

  6. HTML Block Elements • Most HTML elements are defined as block level elements or as inline elements. • Block level elements normally start (and end) with a new line when displayed in a browser. • Examples: <h2>, <p>, <ul>, <table>

  7. HTML Inline Elements • Inline elements are normally displayed without starting a new line. • Examples: <b>, <td>, <a>, <img>

  8. What are DIVs? • One of the most versatile structure tags in code. Short for DIVISION • It is a block level element, which means the browser will display a line break before and after it. • Allows you to divide your page into containers or different pieces. <div> </div>

  9. What are SPANs? • DIVs allow you to divide your webpage up into pieces you can style individually. • SPANs is an inline element that allows you to control styling for smaller parts of your page, such as text. <span> </span>

  10. References • http://www.w3schools.com/html/html_blocks.asp • Codecademy

More Related