Posts

Table Backgrounds on HTML

Image
Table Backgrounds: • You can also set table background: • bgcolor attribute-You can set Background colour for whole table or just for one cell. • background attribute-You can set Background image for whole table or just for one cell. • bordercolor attribute-You can also set border colour . Example: <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border=”1” bordercolor="green" bgcolor="red"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan="2">Row 1 cell 1</td> <td>Row 1 cell 2</td> <td>Row 1 cell 3</td> </tr> <tr> <td>Row 2 cell 2</td> <td>Row 2 cell 3</td> </tr> <tr> <td colspan="3">Row 3 cell 1</td> </tr> </table> </body> </html> OUTPUT:

Colspan & Rowspan Attributes on HTML Table

Image
Colspan & Rowspan Attributes: • You will use colspan attributes if you want to merge two or more columns nto single column. • Rowspan is used if you want to merge two more rows. Example: <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border=”1” > <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan="2">Row 1 cell 1</td> <td>Row 1 cell 2</td> <td>Row 1 cell 3</td> </tr> <tr> <td>Row 2 cell 2</td> <td>Row 2 cell 3</td> </tr> <tr> <td colspan="3">Row 3 cell 1</td> </tr> </table> </body> </html> OUTPUT:

Cellpadding & Cellspacing Attributes on HTML Table

Image
Cellpadding & Cellspacing Attributes: • It is used to adjust the white space in your table cells. • Cellpadding represents the distance between cell borders & content within the cell. • Cellspacing attributes defines the width of the border. Example: <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border=”1” cellpadding=”5”cellspacing=”5”> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Raju</td> <td>5000</td> </tr> <tr> <td>Masuf</td> <td>4000</td> </tr> </table> </body>  </html> OUTPUT:

HTML Table Heading

Image
Table Heading: • It is used by using <th> tag. • Normally you will put your top row as table heading. Example : <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border=”1”> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Raju</td> <td>5000</td> </tr> <tr> <td>Masuf</td> <td>4000</td> </tr> </table> </body> </html>   OUTPUT :

HTML tables

Image
HTML Tables: • The HTML Tables allow web author to arrange data in rows & column of cells. • To create table <table> tag is used in which <tr> tag is used to create table row & <td > tag is used to create table data cells. • Here border is an attributes of<table>tag. Example : <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border=”1”> <tr> <td>Row 1, Column1</td> <td>Row 1, Column2</td> </tr> <tr> <td>Row 2, Column1</td> <td>Row 2 Column2</td> </tr> </table> </body> </html> OUTPUT :

HTML Images

Image
HTML Images: • Images are very important to beautify & depict many complex concepts in simple way on your web page. • To insert image in your web page you use <img>tag. • You can use png,jpeg,jpg image file based on your comfort. • Remember that image name is always case sensitive. Syntax: <img src=”image url”…attributes-lists> Example : <!DOCTYPE html> <html> <head> <title>Image in webpage</title> </head> <body> <p>Simple image insert</p> <img src=”Desktop\SavedPictures\flower.jpg” >  </body> </html>  OUTPUT: Simple image insert