>> Introduction to HTML: Tables

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)

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