Scribd
Upload
16 views

Topic 2.3 Tables

The document discusses HTML tables and various attributes used to style and structure tables. Tables are defined with <table> tags and divided into rows with <tr> tags and cells with <td> tags. Attributes like border, cellpadding, cellspacing, colspan, and rowspan are used to control borders, padding, spacing, and merged cells. Text in cells can be aligned horizontally with align attributes and vertically with valign attributes.

Uploaded by

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

Topic 2.3 Tables

The document discusses HTML tables and various attributes used to style and structure tables. Tables are defined with <table> tags and divided into rows with <tr> tags and cells with <td> tags. Attributes like border, cellpadding, cellspacing, colspan, and rowspan are used to control borders, padding, spacing, and merged cells. Text in cells can be aligned horizontally with align attributes and vertically with valign attributes.

Uploaded by

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

Topic 2: Hypertext Markup Languange (HTML)

HTML Table

2
HTML Table

• Tables are defined with the <table> tag.


• Tables are divided into table rows with the <tr> tag.
• Table rows are divided into table data with the <td> tag.
• A table row can also be divided into table headings with the <th> tag.

<td>

<th>

<tr>

3
HTML Table
Basic Table Setting <body>
<!-- Basic table -->
<table border="1">
<tr>
<th>First</th>
Row 1 Column 3
<th>Lastname</th>
Table head
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
Row 2 Column 3
<td>Smith</td> Table data
<td>50</td>
</tr>
</table>
4
HTML Table
Set Table

<table style="width:300px"> OUTPUT


<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

5
HTML Table
Cell Color

OUTPUT

6
HTML Table

Table with Cell Padding

• The cell padding attribute specifies the space, in pixels, between the cell wall and the cell
content.
• If you do not specify a padding, the table cells will be displayed without padding.

7
HTML Table

Table with Cell Padding


• With cell padding:

OUTPUT

8
HTML Table

Table with Cell Spacing

• Cell spacing specifies the space between the cells.


• To set the cell spacing for the table, use the CSS border-spacing property:

<head> OUTPUT
<style>
table
{
border-spacing:5px;
}
</style>
</head>
9
HTML Table

Align Text in Cells (Horizontal)


• What if you wanted your contents to be aligned to the center or to the right?
• To do this, you add the align=" " command to your <td> tag. You can use the command three ways:

Align Description
align="left" Aligns your cell contents to the LEFT.

align="center" Aligns your contents to the CENTER.

align="right" Aligns your cell contents to the RIGHT.

10
HTML Table

Align Text in Cells (Horizontal)


Let’s try this:

<table width="450" border="2" cellspacing="7"


cellpadding="7">
<tr>
<td align="center"> I'm in the center! </td>
<td align="right"> I'm aligned to the right! </td>
</tr>
</table>

11
HTML Table

Align Text in Cells (Vertical)


• You can also use another alignment command for your cells, the vertical alignment command.
• It looks like this: valign=" ". Here's what it can do:

Align Description
valign=“top" Aligns contents to the TOP of the cell.
valign=“middle" Aligns contents halfway BETWEEN the top
and bottom of the cell.
valign=“bottom" Aligns contents to the BOTTOM of the cell.

12
HTML Table

Align Text in Cells (Vertical)


• Let’s try this
<table width="550" border="2" cellspacing="7" cellpadding="0">
<tr>
<td align="center" valign="top"> I'm on top! <br />
So i start on top!</td>
<td align="center" valign="middle"> I'm in the middle </td>
<td align="center" valign="bottom"> I start at the bottom. </td>
</tr>
</table>

13
HTML Table

Table with a Border Attribute


• The border attribute specifies if a border should be displayed around the table cells or not.

Syntax :
<table border="1">

OUTPUT

14
HTML Table

HTML Table Headings


• Table headings are defined with the <th> tag.

OUTPUT

15
HTML Table
HTML Table Headings - Align
• The align attribute specifies the horizontal alignment of the content in a header cell.

<th align="left|right|center|justify|char">

Value Description
left Left-aligns content
right Right-aligns content
center Default for <th>. Center-aligns content
justify Stretches the lines so that each line has equal width (like in newspapers
and magazines)
char Aligns the content to a specific character

16
HTML Table

HTML Table Headings - Align

OUTPUT

17
HTML Table

HTML Column Span <td colspan="number">


• The colspan attribute defines table>
the number of columns a cell <tr>
<th>Month</th>
should span. <th>Savings</th>
</tr>
<tr>
<td>January</td>

OUTPUT <td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table> 18
HTML Table

HTML Row Span <td rowspan="number">


<table>
<tr> • The rowspan attribute specifies
<th>Month</th> the number of rows a cell
<th>Savings</th> should span.
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td> OUTPUT
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table> 19
HTML Table

HTML Row Span <td rowspan="number">


<table>
<tr> • The rowspan attribute specifies
<th>Month</th> the number of rows a cell
<th>Savings</th>
<th>Savings for holiday!</th> should span.
</tr>
<tr>
<td>January</td>
<td>$100</td>
OUTPUT
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table> 20
Activity 2.6 : HTML Table

1. Create a HTML webpage with a table have three columns and three rows.

21
Activity 2.7: HTML Table
2. Write HTML to create the table below

22
Activity 2.8 : HTML Table
3. Write HTML to create the table below using colspan and rowspan

23
Activity 2.9 : HTML Table
4. Write HTML to create the table below using colspan and rowspan

24

You might also like