Tables for Tabular Data

Objectives

● describe and illustrate data;

● create tables using HTML; and
● practice coding a table.
Tags to create a table <table></table>

Attribute border with a value of at

least 1 with the tag <table border
=”1”>
Ex: <table border=“1”></table>
 Tag
Functions
<tr> <tr> or table row tag to divide the table into
rows
<td> <td> or table data tag, each row divided into data
cells

<td> tag contents of data cell. You can also place

text, images, links or forms inside a <td> tag

<th> <th> or table header tag to divide row. Table

header displayed in bold and is align to the
center.
Inserting Images
Image or Graphic

Refers to general
visual
representation.
It display images
such as clip art,
pictures and
photos on your
web page.
To define in HTML, use the <img> tag
An <img> tag contains only attributes and
has no closing tag.
 <img
src=”filename.jpg”>
Three popular ● Graphic Interchange
Format (GIF)- best for
image formats images with solid
colors, such as logos.
● Joint Photographic
Experts Group (JPG or
JPEG)- good for photos
● Portable Network
Graphic (PNG) format is
also good for photos at
the same time supports
transparency.
 Project (3rd Quarter)
● Make a Family data using table and basic tags (HTML)
● Table consists of 3 columns (name, relationship, and images)
see the example)
● The data in the table should be at the “center” and the size of the
border in the table should be “5” table header font size “300%”,
text font size “150”
● You can choose any color for the background and border of the
table (optional)(plus points)
● be creative
● Print the HTML code and the output in the browser
● Deadline will be on or before February 27, 2023 (on time plus
points) Submit it to your class President or Vice President
Skills & expertise

Motion User Physical HTML,

design Computing CSS,JS
experience