1. >> Introduction to HTML: Tables

2. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph Tag [p] Image [img] Hyperlinks [a] Lists [ol, ul, dl, li, dt, dd] Web-Based Systems - Misbhauddin 2 Recall

3. Web-Based Systems - Misbhauddin 3 Attribute Attributes Popular Attributes src alt height width Image Tag Attribute NameAttribute Value href target Anchor Tag

4. Web-Based Systems - Misbhauddin 4 Used to style/format text on the page Can be added to any tag Style Attribute Sample Text Font size Font color Sample Text Font family Sample Text Combining Attributes in style Sample Text

5. Web-Based Systems - Misbhauddin 5 Used to store tabular data so it is easy to read! The table is included in the tag A table consists of rows and columns Tables …………..

6. Web-Based Systems - Misbhauddin 6 Tables in HTML5 are separated into head and body tag can be thought of as containing information about a table tag containing the actual tabular data. Table Headers ………….. ….………. …………..

7. Web-Based Systems - Misbhauddin 7 Merging Columns Together Use “colspan” attribute Column Span Grades for Students

8. Web-Based Systems - Misbhauddin 8 Merging Rows Together Use “rowspan” attribute rowspan cannot cross thead or tbody boundaries Row Span

9. Web-Based Systems - Misbhauddin 9 TRY NOW FirstSecondThirdTotal Quiz810826 Major303540105 Total126 HINTS To make text bold, include it inside the tag To make a text italic, include it inside the tag

10. Web-Based Systems - Misbhauddin 10 Table Attributes Optional Table Attributes – border - sets the thickness of the border – bgcolor – sets the background color – align={Left | Center | Right} – width={px (pixels) | % (percent)} – cellspacing – Increase distance between the cells – cellpadding – White space between cell border and cell data

11. Web-Based Systems - Misbhauddin 11 Cell Attributes Row Attributes – align – Horizontal Alignment – valign – Vertical Alignment Column Attributes – colspan – Horizontal Span (Merging Columns) – rowspan – Vertical Span (Merging Rows) – align – Horizontal Alignment – valign – Vertical Alignment

12. Web-Based Systems - Misbhauddin 12 Main Title of Web Page Menu HTML CSS JavaScript PHP Content here © Web-based Systems - KFU Layout Using Tables Before CSS, website layout was made using tables (Remember MS FrontPage)

13. Web-Based Systems - Misbhauddin 13 Start Tags include attributes that add extra information on how the content is handled by the browser Style Attribute can be added to all tags for styling the content Tables are used to organize data on a webpage Summary