100 likes | 351 Views
<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.
E N D
<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 • 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
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
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>
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>
HTML Inline Elements • Inline elements are normally displayed without starting a new line. • Examples: <b>, <td>, <a>, <img>
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>
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>
References • http://www.w3schools.com/html/html_blocks.asp • Codecademy