0% found this document useful (0 votes)
10 views11 pages

HTML Table Creation and Styling Guide

The document outlines a series of learning objectives and tasks for students to understand HTML, specifically focusing on creating tables, adding colors, and inserting images. It includes success criteria for recognizing common HTML tags and creating basic HTML documents. Additionally, it provides syntax examples for table creation and styling, including border properties and collapsed borders.

Uploaded by

Judy Judith
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
10 views11 pages

HTML Table Creation and Styling Guide

The document outlines a series of learning objectives and tasks for students to understand HTML, specifically focusing on creating tables, adding colors, and inserting images. It includes success criteria for recognizing common HTML tags and creating basic HTML documents. Additionally, it provides syntax examples for table creation and styling, including border properties and collapsed borders.

Uploaded by

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

Date :28.10.

24 to
1.11.24
LEARNING OBJECTIVES: Students will be able to understand
the structure and syntax of creating tables ,adding colors
and inserting images in html.

Topic: HTML

LEARNING OBJECTIVES: Students will be


able to add borders to the table.

Success criteria: I can recognize common HTML tags


I know to create Basic HTML
Documents
Date :28.10.24 to
THOUGHT OF THE DAY 1.11.24
LEARNING OBJECTIVES: Students will be able to understand
the structure and syntax of creating tables ,adding colors
and inserting images in html.

Success criteria: I can recognize common HTML tags


I know to create Basic HTML
Documents
Date :28.10.24 to
1.11.24
LEARNING OBJECTIVES: Students will be able to understand
the structure and syntax of creating tables ,adding colors
and inserting images in html.

RECAP Table Cells


Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Syntax
<table>
<tr>
<td>name 1</td>
<td>name 2</td>
<td>name 3</td>
</tr>
</table>

Success criteria: I can recognize common HTML tags


I know to create Basic HTML
Documents
Date :28.10.24 to
1.11.24
LEARNING OBJECTIVES: Students will be able to understand
the structure and syntax of creating tables ,adding colors
and inserting images in html.

HTML Table Borders

HTML tables can have borders of different styles and shapes.


How To Add a Border
To add a border, use the border property on table th,
and td elements:

Syntax: table, th, td {


border: 1px solid black;
}
Success criteria: I can recognize common HTML tags
I know to create Basic HTML
Documents
Date :28.10.24 to
1.11.24
LEARNING OBJECTIVES: Students will be able to understand
the structure and syntax of creating tables ,adding colors

Collapsed Table Borders and inserting images in html.

To avoid having double borders set the border-


collapse property to collapse.
This will make the borders collapse into a single
border:

Syntax

table, th, td {
border: 1px solid black;
border-
collapse: collapse;
}
Success criteria: I can recognize common HTML tags
I know to create Basic HTML
Documents
Date :28.10.24 to
1.11.24
LEARNING OBJECTIVES: Students will be able to understand
the structure and syntax of creating tables ,adding colors

TASK 1
PRACTICE TIME and inserting images in html.

Write an HTML program to display the following output

Success criteria: I can recognize common HTML tags


I know to create Basic HTML
Documents
Date :28.10.24 to
1.11.24
HTML PROGRAM LEARNING OBJECTIVES: Students will be able to understand
the structure and syntax of creating tables ,adding colors
and inserting images in html.

<html>
<head> <tr>
<style> <td>Name 1</td>
table, th, td { <td>ICT</td>
border: 1px solid black; <td>50</td>
border-collapse: collapse; </tr>
}
</style> <tr>
</head> <td>name 2e</td>
<body> <td>maths</td>
<h2>Collapsed Borders</h2> <td>45</td>
<table style="width:100%"> </tr>
<tr>
<th>student name</th> </body>
<th>subject</th> </html>
<th>marks</th>
</tr>

Success criteria: I can recognize common HTML tags


I know to create Basic HTML
Documents
Date :28.10.24 to
1.11.24
LEARNING OBJECTIVES: Students will be able to understand
the structure and syntax of creating tables ,adding colors

TASK 2
PRACTICE TIME and inserting images in html.

Write an HTML program to display the following output

Success criteria: I can recognize common HTML tags


I know to create Basic HTML
Documents
Date :28.10.24 to
1.11.24
HTML PROGRAM LEARNING OBJECTIVES: Students will be able to understand
the structure and syntax of creating tables ,adding colors
<tr> and inserting images in html.
<html> <td>Jill</td>
<head> <td>Smith</td>
<style> <td>50</td>
table, th, td { </tr>
border: 1px solid black; <tr>
}
</style> <td>Eve</td>
</head> <td>Jackson</td>
<body> <td>94</td>
</tr>
<h2>Table With Border</h2> <tr>
<td>John</td>
<p>Use the CSS border property to add a border to the table.</p> <td>Doe</td>
<td>80</td>
<table style="width:100%"> </tr>
<tr> </table>
<th>Firstname</th>
<th>Lastname</th> </body>
<th>Age</th> </html>
</tr>

Success criteria: I can recognize common HTML tags


I know to create Basic HTML
Documents
L.O :To be able to understand the role of AI in education. Its
advantages and disadvantages

I am a bit confused I can do the


I am not clear on this
I can and need more help​​ tasks confidently​​

Create table with


collapsed borders

Create table with borders

SUCCESS CRITERIA: I can able to define AI and explain its primary function.
I know various AI tools used in education.
L.O :To be able to understand the role of AI in education. Its
advantages and disadvantages

SUCCESS CRITERIA: I can able to define AI and explain its primary function.
I know various AI tools used in education.

You might also like