1. >> HTML: Tables

2. Web-Based Systems - Misbhauddin
Attributes
Attribute
<img src=“images/kfu-logo.html” />
Attribute Name
Attribute Value
Popular Attributes
src
alt
height
width
href
target
Image Tag
Anchor Tag
Web-Based Systems - Misbhauddin

3. Web-based Systems | Misbhauddin
TABLES
Web-based Systems | Misbhauddin

4. Tables use in HTML before CSS
Positioning content as well as for building the overall layout of a page
This had many issues
Now Tables used only for organizing data and sometimes for layout (sp. In forms – next class)
Web-Based Systems - Misbhauddin

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

6. Web-Based Systems - Misbhauddin
Tables
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
<table>
<tr>
<td>…………..</td>
</tr>
<tr>
</tr>
</table>
Web-Based Systems - Misbhauddin

7. Web-Based Systems - Misbhauddin
Table Headers
Tables in HTML5 are separated into head, body and foot
<thead> tag can be thought of as containing information about a table header
<tbody> tag containing the actual tabular data
<tfoot> tag is used to summarize the data in the bottom
<table>
<thead>
<tr>
<th>…………..</th>
<th>….……….</th>
<td>…………..</td>
</tr> </thead>
<tbody> <tr>
</tr>
<tr>
</tr> </tbody>
</table>
Web-Based Systems - Misbhauddin

8. Web-Based Systems - Misbhauddin
Column Span
Merging Columns Together
Use “colspan” attribute
<td colspan=“3”>
Grades for Students
Web-Based Systems - Misbhauddin

9. Row Span Merging Rows Together Use “rowspan” attribute
rowspan cannot cross thead or tbody boundaries
<td rowspan=“2”>
Web-Based Systems - Misbhauddin

10. Web-Based Systems - Misbhauddin
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. Web-Based Systems - Misbhauddin
Cell Attributes
Row Attributes
align – Horizontal Alignment
valign – Vertical Alignment
Column Attributes
colspan – Horizontal Span (Merging Columns)
rowspan – Vertical Span (Merging Rows)
Web-Based Systems - Misbhauddin

12. Web-Based Systems - Misbhauddin
TRY NOW
First
Second
Third
Total
Quiz 8 10 26
Major 30 35 40
105
126
To make text bold, include it inside the <strong> tag
To make a text italic, include it inside the <em> tag
HINTS
Web-Based Systems - Misbhauddin

13. Web-Based Systems - Misbhauddin
Summary
Start Tags include attributes that add extra information on how the content is handled by the browser
Tables are used to organize data on a webpage
Tables are divided into thead, tbody and tfoot
Tables rows and columns are specified using tr (table row) and td (table data) [th for table header).
Rows and columns can be merged together using rowspan and colspan attributes
Web-Based Systems - Misbhauddin