>> introduction to html: tables. html is used to give websites structure 5 basic tags element...
TRANSCRIPT
Web-Based Systems - Misbhauddin 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]
Recall
Web-Based Systems - Misbhauddin 3
<img src=“images/kfu-logo.html” />
Attribute
Attributes
Popular Attributes
• src• alt• height• width
Image Tag
Attribute Name Attribute Value
• href• target
Anchor Tag
Web-Based Systems - Misbhauddin 4
• Used to style/format text on the page• Can be added to any tag
Style Attribute
<p style=“font-size: 12px”>Sample Text</p>
Font size
Font color
<p style=“color: green”>Sample Text</p>
Font family<p style=“font-family: Verdana”>Sample Text</p>
Combining Attributes in style
<p style=“font-family: Verdana; color:yellow”>Sample Text</p>
Web-Based Systems - Misbhauddin 5
• Used to store tabular data so it is easy to read!• The table is included in the <table> tag • A table consists of rows and columns
Tables
<td>…………..</td> <td>…………..</td> <td>…………..</td><td>…………..</td> <td>…………..</td> <td>…………..</td>
<tr> </tr>
</tr><tr>
</table>
<table>
Web-Based Systems - Misbhauddin 6
• Tables in HTML5 are separated into head and body• <thead> tag can be thought of as containing
information about a table• <tbody> tag containing the actual tabular data.
Table Headers
<th>…………..</th> <th>….……….</th><td>…………..</td> <td>…………..</td><td>…………..</td> <td>…………..</td>
<tbody> <tr> </tr>
</tr> </tbody><tr>
</table>
<table>
<tr><thead> </tr> </thead>
Web-Based Systems - Misbhauddin 7
• Merging Columns Together• Use “colspan” attribute
Column Span
Grades for Students<td colspan=“3”>
Web-Based Systems - Misbhauddin 8
• Merging Rows Together• Use “rowspan” attribute• rowspan cannot cross thead or tbody
boundaries
Row Span
<td rowspan=“2”>
Web-Based Systems - Misbhauddin 9
TRY NOW
First Second Third TotalQuiz 8 10 8 26
Major 30 35 40 105
Total 126
HINTS• To make text bold, include it inside the <strong> tag• To make a text italic, include it inside the <em> tag
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
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
Web-Based Systems - Misbhauddin 12
Main Title of Web Page
MenuHTMLCSSJavaScriptPHP
Content here
© Web-based Systems - KFU
Layout Using Tables
Before CSS, website layout was made using tables (Remember MS FrontPage)