0% found this document useful (0 votes)
8 views17 pages

html (Ch3)

This document provides an overview of HTML table elements, including the structure and attributes of tables, rows, and cells. It explains how to use tags like <table>, <tr>, <td>, and <caption>, as well as attributes such as bgcolor, colspan, and rowspan. Additionally, it includes sample code for creating tables and inserting images, along with exercises for further practice.

Uploaded by

kothit.97108
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)
8 views17 pages

html (Ch3)

This document provides an overview of HTML table elements, including the structure and attributes of tables, rows, and cells. It explains how to use tags like <table>, <tr>, <td>, and <caption>, as well as attributes such as bgcolor, colspan, and rowspan. Additionally, it includes sample code for creating tables and inserting images, along with exercises for further practice.

Uploaded by

kothit.97108
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
You are on page 1/ 17

HTML

Chapter (3)
Hyper Text Markup Language
Table Element
 Each individual table cell is at the intersection of a specific
row and column
 Configure with table, tr, and td elements
 Each table begin with a <table> tag and ends with a </table>
tag
 Each table row begin with a <tr> tag and ends with a </tr> tag
 Each table cell(table data) begin with a <td> tag and ends with
a </td> tag
 The caption begins with a <caption> tag and ends with a
</caption> tag
Attributes of table
bgcolor red / blue / ….

background .jpg / .jpeg/ .png/ .gif

border numeral (1 to … )

width numeral (10 to … )

height numeral (10 to … )

title / summary Text….

cellspacing (space between cells) numeral (10 to … )

cellpadding(space between text numeral (10 to … )


and edge of cell)
align right/ left/ center
Sample Code
<body> <tr>
<table border=“1”> <td> Su Su </td>
<tr> <td> 1cst-2</td>
<td> Name </td> <td> mdy </td>
<td> Roll </td> </tr>
<td> Address</td> <tr>
</tr> <td> Mya </td>
<td> 1cst - 3</td>
<tr> <td> ygn </td>
<td> Wai </td>
<td> 1cst-1</td> </tr>
<td> ygn</td> </table>
</tr> </body>
Table Caption

<body> </tr>
<table border=“1”> <tr>
<caption> <td> Su Su </td>
Student list <td> 1cst-2</td>
</caption> <td> mdy </td>
<tr> </tr>
<td> Name </td> <tr>
<td> Roll </td> <td> Mya </td>
<td> Address</td> <td> 1cst - 3</td>
</tr> <td> ygn </td>
<tr>
<td> Wai </td> </tr>
<td> 1cst-1</td> </table>
<td> ygn</td> </body>
Attributes of tr (Table Row)

bgcolor red / blue / ….

background .jpg / .jpeg/ .png/ .gif

align right/ left(default)/ center


Attributes of td and th
td = table cell
th = table heading (bold)
bgcolor red / blue / ….

background .jpg / .jpeg/ .png/ .gif

align right/ left(default)/ center

colspan numeral(1 to …)

rowspan numeral(1 to …)
The colspan Attributes
 colspan attribute in HTML used to set the number of columns
a cell should span in a table
 only be applied on <td> or<th> HTML element
<table border=“1”>
<tr>
<td colspan=“2”> This span two columns </td>
</tr>
<tr>
<td>Column1</td>
<td>Column1</td>
</tr>
</table>
The rowspan Attributes
 rowspan attribute in HTML used to set the number of rows a
cell should span in a table
 only be applied on <td> or<th> HTML element
<table border=“1”>
<tr>
<td rowspan=“2”> This span two columns </td>
<td>Row1 Column2</td>
</tr>
<tr>
<td>Row2 Column2</td>
</tr>
</table>
Row span and Column span

<body> <tr align=“center” >


<table border=“1” <td rowspan=“2”> Total </td>
width=“300”> <td> 25 </td>
</tr>
<tr>
<th>Male</th> <tr>
<th>Female</th> <td align=“right”> 30 </td>
</tr> </tr>

<tr align=“center”>
<td colspan=“2”> 55 </td>
</tr>
</table>
</body>
Sample Code
<body> <tr align=“center” >
<table border=“1” <td rowspan=“2”> Postion </td>
width=“300” height=“300”> <td> Upper </td>
<td> 3mm </td>
<tr bgcolor=“pink”> </tr>
<th colspan=“2”>
</th> <tr align=“right”>
<th> Ring Clearance <td> Lower </td>
</th>
<td bgcolor=“red”> 3.3 mm </td>
</tr>
</tr>
</table>
</body>
Insert Image into table cell
<body>
<table border=“1”>
<tr>
<td> <img src=”pic.jpeg” height=”100”
width=”100” title=“1 Pic" > </td>
<td> <img src=”pic.jpeg” height=”100”
width=”150” title=“2 Pic" > </td>
</tr>
<tr>
<td> First Picture</td>
<td> Second Picture</td>

</tr>
</table>
</body>
cell padding
<body>
<table border=“1” cellpadding=“2”>
<tr>
<td> Name </td>
<td> Roll </td>
<td> Address</td>
</tr>

<tr>
<td> Wai </td>
<td> 1cst-1</td>
<td> ygn</td>
</tr>
</table>
</body>
Insert table into another table cell
<body> <td>
<table border=“1”> <table border=“1”>
<tr> <tr>
<td> Name </td> <th> Current</th>
<td> Roll </td> <th> Old </th>
<td>Address</td> </tr>
</tr> <tr>
<tr> <th> ygn </th>
<td> Wai </td> <th> mdy </th>
<td> 1cst-1</td> </tr>
<td> ygn</td> </table>
</tr> </td>
<tr> </tr>
<td> Su </td> </table>
<td> 1cst-2</td> </body>
<td>Mandalay</td>
</tr>
cell spacing

<body>
<table border=“1” cellspacing=“20”>
<tr>
<td> Name </td>
<td> Roll </td>
<td> Address</td>
</tr>

<tr>
<td> Wai </td>
<td> 1cst-1</td>
<td> ygn</td>
</tr>
</table>
</body>
<thead>, <tbody> and <tfoot> element

<body> <td rowspan=“2”> Total </td>


<table border=“1” <td> 25 </td>
width=“300”> </tr>
<thead> <tr>
<tr> <td align=“right”> 30 </td>
<th>Male</th> </tr>
<th>Female</th> </tbody>
</tr>
</thead> <tfoot>
<tr align=“center”>
<tbody> <td colspan=“2”> 55 </td>
<tr align=“center” > </tr>
</tfoot>
</table>
</body>
Exercises for Chapter 3

You might also like