TABLES Tables in HTML Arrangement of data in
TABLES
Tables in HTML Arrangement of data in the form of rows and columns similar to a spreadsheet. In order to create a table in a web page, firstly the structure of the table is to be defined using the TABLE tag in HTML. All the table related tags are included between the <TABLE>. . </TABLE> tags. Table rows can be of 2 types: Header row: used to display the headings of the column. The content of header row is centered and bold face. Data row: individual data cells placed in the horizontal plane creates a data row.
When the structure of a table is created <TR> tag is used to add a row in the table. It marks the beginning of the row. The closing tag is optional. A table header row is defined using the <TH>. . </TH> tag. A table data row is defined using <TD>. . </TD> Attributes of TABLE tag: Ø ALIGN: Horizontal alignment is controlled by the ALIGN attribute. Value: LEFT, RIGHT, CENTER. Ø VALIGN: controls the vertical alignment of the cell contents. Value: TOP, MIDDLE, BOTTOM. Ø WIDTH: Sets the WIDTH to a specific number of pixels or to a %age of the available screen width. If the width is not mentioned then the data cell is adjusted based on the cell data value. Ø HEIGHT: specifies the height of table in pixels or %age
BORDER: controls the border to be placed around the table BGCOLOR: displays the background color of a cell, of a row or of table BORDERCOLOR: displays the border with the color specified. BACKGROUND: display image at the background of the table To include image within a cell: include Image tag within the TD tag. To add caption to table, use caption tag within the table tag such as <table><caption>Heading</caption></table>
<html> <head><title>TABLES</title></head> <body> <table> <tr> <th>NAME <th>AGE </tr> <td>shilpa <td>21 </tr> <td> vaishali <td>22 </tr> </table> </body> </html>
ALIGN= right <table align=right>
Align=center <table align=center>
Border=2 <table border=2> and <table border=5>
Width <table width=25%> and <table width=50%>
<table bgcolor=pink border=2> <table border=2><tr bgcolor=pink> <table border=2> <tr><th bgcolor=pink>
<table background="sunset. jpg" border=2> <table border=2> <tr><td background="sunset. jpg" >
<table border=2 bordercolor=red> <td ><img width=100 height=100 src=sunset. jpg ></td>
Advantages of using tables Data becomes much easier to read and manage All search engines support tables A table can contain many different types of content like form, images, text.
- Slides: 13