Scribd
Upload
15 views

2-HTML Tables

The document describes various tags and attributes used to structure HTML tables. It explains that the <table> tag defines an HTML table, <tr> defines a table row, and <td> defines a table data cell. It provides examples of basic tables and describes additional attributes like border, cellpadding, cellspacing, width, height, align, valign, bgcolor, rowspan, and colspan that can be used to control the appearance and layout of tables.

Uploaded by

firefox98839883
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
15 views

2-HTML Tables

The document describes various tags and attributes used to structure HTML tables. It explains that the <table> tag defines an HTML table, <tr> defines a table row, and <td> defines a table data cell. It provides examples of basic tables and describes additional attributes like border, cellpadding, cellspacing, width, height, align, valign, bgcolor, rowspan, and colspan that can be used to control the appearance and layout of tables.

Uploaded by

firefox98839883
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/ 31

HTML Tables

HTML Table

• The <table> tag begins the table, place what want inside and end the
table with the </table> tag. To begin adding contents to table, need the
<tr> and <td> tags.

• The <tr> stands for table row and the <td> stands for table data, which is
what will place after <table> tag. End a table, data section with the </td>
tag and each table row with the </tr> tag.

2
Example

<table>
<tr>
<td>
This is my table!
</td>
</tr>
</table>

3
Cont..

<body>
Hi!
<table border="2">
<tr>
<td>
This is my table!
</td>
</tr>
</table>
</body>

4
Example
<body>
Hi!
<table border="2">
<tr>
<td>This is cell 1</td>
<td>This is cell 2</td>
</tr>
</table>
</body>
5
Cont..
td
<body>
Hi! tr row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2


<table border=“9">
<tr>
<td>row 1, cell 1</td> A table is divided into rows (with the
<td>row 1, cell 2</td> <tr> tag)
</tr>
<tr> Each row is divided into data cells (with
<td>row 2, cell 1</td> the <td> tag). td stands for "table data,"
<td>row 2, cell 2</td> and holds the content of a data cell
</tr>
A <td> tag can contain text, links,
</table>
images, lists, forms, other tables, etc.
</body> 6
HTML Table Headers
• Header information in a table are defined with the <th> tag
• All major browsers display the text in the <th> element
as bold and centered
• <table border="1">
<tr>
<th>Header 1</th> Header 1 Header 2
<th>Header 2</th> row 1, cell 1 row 1, cell 2
</tr> row 2, cell 1 row 2, cell 2
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
7
Exercise

Fruit Percentage

Bananas 23%

Oranges 13%

Other 10%

8
Cell Padding and Spacing

• With the cellpadding and cellspacing attributes, you will be able to


adjust the spacing between table cells

• Setting the cellpadding attribute determines how much space will exist
between a table cell border and the elements contained within it, whereas
cellspacing determines how much space will exist between each table
cell

• Place a number inside the quote mark


Cellpadding=“”
Cellspacing=“”

9
Cont..

<table border =“2” cellpadding=“15” >


<tr>
<td><b>Column 1</b> </td>
<td><b>Column 2</b> </td>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr> <td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
10
</table>
Cont..

<table border =“2” cellpadding=“15” cellspacing=“15” >

<tr>
<td><b>Column 1</b> </td>
<td><b>Column 2</b> </td>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr> <td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
11
</table>
Table width & height

<table border=“2” bordercolor=“red” width=“600” height=“500” >


<tr>
<td>
This table really long !
</tr>
</td>
</table>

12
Cont..
<table border=“2” bordercolor=“red” width=“100%” height=“70%” >
<tr>
<td>
This table really long !
</tr>
</td>
</table>

13
align
• align=“left”
Aligns cell contents to the left

• align=“center”
Aligns cell contents to the center

• align=“right”
Aligns cell contents to the right

14
Cont..
<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> 15
valign
• Valign=“top”
Align contents to the top of the cell

• Valign=“middle”
Align contents halfway between the top and bottom of the cell

• Valign=“bottom”
Align contents to the bottom of the cell

16
Cont..
<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> 17
bgcolor
<table border=“5” bgcolor="red">
<tr>
<td>
Red Rules!
</td>
</tr>
</table>

18
Cont..
<table width="75" border=“2”>
<tr>

<td bgcolor="red">
Red
</td>

<td bgcolor="blue">
blue
</td>

</tr>
</table>
19
Cont..
<table width="200" border=“2”>

<tr bgcolor="red">
<td>Red</td>
<td>Red Again...</td>
</tr>

<tr bgcolor="blue">
<td>Blue</td>
<td>Blue Again... Again...</td>
</tr>
</table>

20
Rowspan = “ ”

• Defines the number of vertical table rows the cell should


take up. Place number inside the quote marks

21
Example 01
<table border="2">
<tr>
<td align="center">
Nice guy,Idn' he?
</td>

<td rowspan="2" align="center">


rowspan
</td>
</tr>

<tr>
<td align="center">
Met him at the shop
</td>
</tr>
</table> 22
Example 02
<table border="1" >
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>

<tr>
<td rowspan="2">d</td>
<td>e</td>
<td>f</td>
</tr>

<tr>
<td>g</td>
<td>h</td>
</tr>
23
</table>
Exercise
<table border="1" >
<tr>
<td rowspan ="3">m</td>
<td>h</td>
<td>y</td>
</tr>

<tr>
<td>p</td>
<td rowspan="2">e</td>
</tr>

<td>r</td>
</tr>

</table> 24
Colspan = “ ”

• Defines the number of horizontal columns the cell


should take up
• Place number inside the quote marks

25
Example 01

<table border="1" cellpadding="5" >

<tr>
<td colspan="3" align="center"><b>Table header</b>
</tr>

<tr>
<td align="center">Table cell 1</td>
<td align="center">Table cell 2</td>
<td align="center">Table cell 3</td>

</tr>
</table>

26
Example 02
<table border="1">
<tr>
<td colspan="3">s</td>
</tr>
<tr>
<td>s</td>
<td>s</td>
<td>s</td>
</tr>
<tr>
<td colspan="2">s</td>
<td>s</td>
</tr>
</table> 27
Exercise
<table border="1" width="100">
<tr>
<td colspan="2">a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2">f</td>
<td rowspan="3">g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
</tr>
<tr>
<td colspan="2">j</td>
28
<td>k</td>
<tr title=“ ”>
<table border="1">
<tr title="You are looking at Row 1” bgcolor="silver">
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr title="You are looking at Row 2" bgcolor="aqua">
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2 29


Table within tables
<table width="25%" border="6">
<tr>
<td align="center">
<table width="75%" border="2">
<td align="center">I'm inside the small table!</td>
</table>
</td>
</tr>
</table>

30
31

You might also like