Lecture # 4
CSC336 Web Technologies
Credit Hours: 3(2, 1)
Course Instructor: SAIF ULLAH IJAZ
Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad
Ethics in Information Technology, Sixth Edition 1
Tables, Div, Span, and
Layout Design in HTML
Introduction to HTML Layout
HTML PROVIDES BASIC ELEMENTS FOCUS ON TABLES, DIV, AND SPAN THESE ELEMENTS HELP ORGANIZE
FOR STRUCTURING WEB CONTENT. FOR LAYOUT DESIGN. CONTENT WITHIN A WEBPAGE.
What Are HTML Tables?
Tables are used to present data in a Consist of rows and columns. Commonly used for structuring
tabular format. data, not for page layout (although
it was used for layout in the past).
Basic Table Structure
<table>
• html
•<thead>
Copy code
<tr>
• <table>
• <th>Header
<tr> 1</th> <th>Header 2</th>
• </tr><th>Header 1</th>
•</thead>
<th>Header 2</th>
•<tbody>
</tr>
• <tr>
<tr>
• <td>Data 1</td>
<td>Data <td>Data 2</td>
1</td>
• </tr><td>Data 2</td>
•</tbody>
</tr>
• </table>
</table>
• Example of a simple table with headers and data rows.
Table Elements
• <table>: Defines the table structure.
• <tr>: Table row.
• <td>: Table data (cell).
• <th>: Table header (bold and centered by default).
Using Tables for Layout (Deprecated)
In early web design, tables were This method is now discouraged in
Example:
used to structure entire web pages. favor of more flexible elements.
<table>
• html
<thead>
• Copy code
<tr>
• <table>
<th>Header</th>
</tr>
• <tr>
</thead>
• <td>Header</td>
<tbody>
• </tr>
<tr>
• <tr> <td>Content</td>
• <td>Content</td>
</tr>
</tbody>
• </tr>
<tfoot>
• <tr>
<tr>
• <td>Footer</td>
<td>Footer</td>
• </tr>
</tr>
</tfoot>
• </table>
</table>
Table Attributes
border: Adds a border around the table and cells.
cellpadding: Adds space inside table cells.
cellspacing: Adds space between table cells.
Example: <table border="1" cellpadding="5" cellspacing="5">...</table>
Colspan Vs Rowspan
HTML tables can have cells that span over
multiple rows and/or columns.
Merging Cells in Tables
• Use colspan and rowspan to merge cells:
<td colspan="2">Merged Column</td>
<td rowspan="2">Merged Row</td>
Introduction to Div
• <div>: A block-level element used to group and structure content.
• Used for creating sections of a webpage.
• Unlike tables, <div> is better suited for flexible layout design.
Basic Example of a Div
• Groups content together for layout and styling purposes.
<div>
<h1>Title</h1>
<p>This is a paragraph inside a div.</p>
</div>
Div for Page Sections
• Example of a common webpage structure using <div>:
<div id="header">Header</div>
<div id="content">Main Content</div>
<div id="footer">Footer</div>
• Helps to create logical page divisions.
Introduction to Span
• <span>: An inline element used to group text for styling.
• Does not create a new block on the page.
• Best for styling small sections of text.
<p>This is a <span>highlighted</span>
word in a sentence.</p>
Basic Example of • The <span> element is used
inside paragraphs or headings to
Span apply different styles.
<div>:
• Block-level element.
• Creates a new line.
• Used for sections of content.
Div vs Span <span>:
• Inline element.
• Stays on the same line.
• Used for small sections of text.
Layout Design with Tables (Example)
<table>
<thead>
• html
<tr>
• Copy
<th>Header</th>
code
</tr>
•</thead>
<table>
•<tbody>
<tr>
• <tr> <td>Header</td>
• <td>Content</td>
</tr>
</tr>
•</tbody>
<tr>
•<tfoot> <td>Main Content</td>
• <tr></tr>
• <td>Footer</td>
<tr>
• </tr> <td>Footer</td>
</tfoot>
•
</table></tr>
• </table>
• This is how early web layouts were designed, using tables to divide the page
into sections.
Div for Layout (Example)
<div• html
id="container">
• Copy code
<div id="header">Header</div>
• <div id="container">
• <div
<div id="main-content">Main
id="header">Header</div> Content</div>
• <div
<div id="footer">Footer</div>
id="main-content">Main Content</div>
• <div id="footer">Footer</div>
</div>
• </div>
• <div> is now the preferred method for creating page sections.
Nesting Divs
• You can nest <div> elements inside each other for more complex
layouts.
• Example:
• html
<div• Copy
class="container">
code
• <div class="left">Left Section</div>
<div class="container">
• <div
<div class="right">Right
class="left">Left Section</div>
Section</div>
• <div class="right">Right Section</div>
</div>
• </div>
More flexible and
accessible than tables.
Importance of
Using Div for Works well with modern
Layout web design practices.
Easy to style using CSS
(covered later).
• Use <div> for block-level content
or sections.
• Use <span> for inline text or small
Layout Best elements within other content.
Practices with • Avoid using tables for layout, as it
Div and Span is less responsive and harder to
maintain.
Tables should be reserved for
tabular data (e.g.,
Avoiding spreadsheets, data tables).
Tables for
Layout
Using tables for page layout
makes the site less responsive
and more difficult to style.
Tables are useful for tabular data, but not for
layout.
Lesson Div is the standard for page sections and
Learning layout.
Outcomes
(LLOs) Span is used for inline styling of text.
Organize and structure your content with
these elements to build well-structured web
pages.
