Information and Communications Technology

9th Grade

INTRODUCTION TO
WEB DESIGN
HTML Table
 Defining an HTML Table
 An HTML table is defined with the <table> tag.
 Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default,
table headings are bold and centered. A table data/cell is defined with the <td> tag.

2
Ex. Creating a table
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
3
Note: The <td> elements are the data containers of the table.

SAMPLE OUTPUT

Note: The <td> elements are the data containers of the table.

4
 HTML Table - Collapsed Borders
If you want the borders to collapse into one border,
add border-collapse property:
5
SYNTAX
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

ADD A FOOTER 6
 HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its
borders.
 If you do not specify a padding, the table cells will be
displayed without padding.
To set the padding, use the padding property:
7
SYNTAX
th, td {
padding: 15px;
}

ADD A FOOTER 8
 HTML Table - Adding Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the border-spacing property.
9
SYNTAX
table {
border-spacing: 5px;
}

ADD A FOOTER 10
 Category 1 Category 2 Category 3
Subject 1
Subject 2
50,000
500,000
400,000
4,000,000
1,600,000
16,000,000
TABLE
Subject 3
Subject 4
75
5,625,000
80
48,000,000
90
216,000,000
SLIDE
Subject 5 0 0 0
Lorem ipsum dolor sit
Subject 6 5,625,000 48,000,000 216,000,000 amet, consectetuer
Subject 7 1,687,500 9,600,000 21,600,000 adipiscing elit.
Subject 8 562,500 2,400,000 10,800,000 Maecenas porttitor
Subject 9 281,250 2,400,000 4,320,000 congue massa
Subject 10 7,593,750 52,800,000 187,920,000

ADD A FOOTER 11
 BIG IMAGE SLIDE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit

ADD A FOOTER 12
 VIDEO SLIDE

ADD A FOOTER 13
THANK YOU!
Alexander Martensson

Phone
678-555-0143
Email
martensson@example.com
 Customize this Template

Template Editing
Instructions and Feedback

ADD A FOOTER 15