130 likes | 151 Views
Learn how to define, arrange, and customize data in the form of rows and columns using TABLE tags in HTML, with attributes like ALIGN, VALIGN, WIDTH, HEIGHT, BGCOLOR, and more. Create header and data rows for structured data display on web pages. Include images and captions. Explore the advantages of using tables for better data organization and presentation.
E N D
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> <tr> <td>shilpa <td>21 </tr> <tr> <td> vaishali <td>22 </tr> </table> </table> </body> </html>
<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.