Scribd
Upload
4 views

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
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

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
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