Scribd
Upload
221 views

Module 7: Inserting Tables Module 7: Inserting Tables

This document provides instructions on how to insert tables in HTML. It discusses using <table>, <tr>, <th>, and <td> tags to define the table structure. It also covers adding borders, collapsing borders, adding cell padding, border spacing, spanning columns with colspan, spanning rows with rowspan, and inserting images into tables. The document includes activities demonstrating how to create tables with these various formatting options.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
221 views

Module 7: Inserting Tables Module 7: Inserting Tables

This document provides instructions on how to insert tables in HTML. It discusses using <table>, <tr>, <th>, and <td> tags to define the table structure. It also covers adding borders, collapsing borders, adding cell padding, border spacing, spanning columns with colspan, spanning rows with rowspan, and inserting images into tables. The document includes activities demonstrating how to create tables with these various formatting options.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Module 7: Inserting Tables

HTML Tables
• An HTML table is defined with the <table> and
</table> tags.
• Each table row is defined with the <tr> and </tr>
tags.
• A table header is defined with the <th> and </th>
tags. By default, table headers are bold and
centered.
• A table data or cell is defined with the <td> and
</td> tags.
HTML Tables
• The <td> elements are the data containers of a
table. They can contain all sorts of HTML elements
like texts, images, lists and even other tables.
Activity 27
Adding table borders
• By default, tables are displayed without borders.
• A border is set using the CSS border property.
• Borders should be defined for both the table and
its cells.
Activity 28
Collapsing borders
• If you want to collapse all borders into just one
border, add the CSS border-collapse property.
• The value should be collapse.
Activity 29
Adding cell padding
• Cell padding specifies the space between the cell
content and its borders.
• The CSS padding property is used to set the cell
padding.
Activity 30
Adding border spacing
• Border spacing specifies the space between the
cells.
• To set the border-spacing for a table, use the CSS
border-spacing property.
Activity 31
Spanning a column
• To make a cell span (cover) more than one column,
use the colspan attribute.
Activity 32
Spanning a row
• To make a cell span (cover) more than one row,
use the rowspan attribute.
Activity 33
Laboratory
Exercise 12
Inserting Tables with colspan & rowspan
Instructions
• Create a new HTML file and save it as
laboratory12.html
• The title should be “Laboratory 12”
• Create a table that should look like the image next
slide
Instructions
• The table should be centered (using margin:auto),
have a 1px solid black border and all border should
be collapsed. Font size should be 50px.
• All cells should have a 1px solid black border with
a padding of 10px.
• Cells B and M should be centered in the cell.
Laboratory
Exercise 13
Inserting Tables with Images
Instructions
• Create a new HTML file and save it as
laboratory13.html
• The title should be “Laboratory 13”
• Create a table that should look like the image next
slide
Instructions
• The table should be centered (use the margin:auto
property), should have a 1px solid black border. All
borders should be collapsed.
• All cells (<td> and <th>), should have a 1px solid
black border and a padding of 10px.
• All logos should be 120px in width and height.
• All values should be in bold fonts.
• 6 browsers should be presented in the web page.

You might also like