html-table

Table
“Table is Combination of Rows and Columns,
Which intersect each other and create cell where
user store the value”
Row/Tuple
Column
Cell
Intersect

HTML tables allow web developers to
arrange data into rows and columns.
Html table has following element
1. < table > :The <table> tag defines an HTML table.
2. < tr > : Each table row is defined with a <tr> tag
3. < th > / <td> : <td> and <th> tags which defined the
table’s headers and data cells
“Tables are useful for the general display of tabular data”

<table>
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>

RollNo Name
1 Komal
<Table
>
</Table>
<tr>
<tr>
</tr>
</tr>
<td>
</td>
<td>
</td>
<td>
<td>
</td>
</td>

RollNo Name
1 Komal
<Table>
</Table>
<tr>
<tr>
</tr>
</tr>
<td>
</td>
<td>
</td>
<td>
<td>
</td>
</td>
RollNo
Name
1
Komal

Table Attribute
The table tag begins the process of building a
table. It carries a long list of attributes ,
including
1. Border
2. Bordercolor
3. Width
4. Height
5. BGColor
6. BackGround
7. Frame
8. Rules
9. Align
10. Valign

1. Border Attribute
A table’s border is specified through BORDER
attribute.(Border = size)
<table>
<tr>
<td> Roll No </td>
<td> Name </td>
</tr>
<tr>
<td> 1 </td>
<td> Komal </td>
</tr>
</table>
<table Border = “ 1 ” >

2. BorderColor Attribute
A table’s bordercolor attribute is used to specify the
color of table’s border.(Bordercolor = “Any color”)
<tr>
<td> Roll No </td>
<td> Name </td>
</tr>
<tr>
<td> 1 </td>
<td> Komal </td>
</tr>
</table>
<table Border = “ 1 ” Bordercolor = “red”>

3. Width and Height Attribute
The width property specifies the width of an
element, and the height property specifies the
height of an element.
< Table width=“50%” or Height = “50%”>

<tr>
<td> Roll No </td>
<td> Name </td>
</tr>
<tr>
<td> 1 </td>
<td> Komal </td>
</tr>
</table>
<table Border = “ 1 ” width=“50%” or Height = “50%” >

BGColor
We can set background color for whole
table or just for one cell
Syntax
<table
bgcolor="color_name”>

<table Border = "1" >
<tr>
<td> Roll_No
</td>
<td> Name </td>
</tr>
<tr>
<td> 100</td>
<td> Komal </td>
</tr>
BGcolor = "pink“ >

BackGround
The background attribute of the TABLE, TR,
and TD (TH) elements specifies the
background image of the table.

Syntax
<table background="back.gif">
Applied to an entire table.
<tr background="back.gif">
Applied to all cells in a row.
<td background="back.gif">
Applied to one cell.

<table Border = "1" Background="6.gif"
width =30% height = 55%>
<tr>
<td>Roll_No </td>
<td>Name </td>
</tr>
<tr>
<td>100 </td>
<td>Komal </td>
</tr>
</table>

Align
Align attribute of Table can positioning
Tables and their contents in relation to other
elements on the Web page.
Align attributes can be set in two levels
1. Table Alignment
2. The alignment of content inside the
Table Cells.

<table align=“Left /Center / right ">
Syntax

<Table Border = "1" align ="Center">
<tr align =“Center">
<td> Roll_No </td>
<td> Name </td>
</tr>
<tr>
<td> 100 </td>
<td> Komal </td>
</tr>
</table>

Valign
The purpose of the HTML valign attribute is to
define the vertical alignment of the content of a
table cell.
Value Description
top Sets the vertical alignment of cell content top.
middle Sets the vertical alignment of cell content center.
bottom Sets the vertical alignment of cell content bottom.

<Table Border = "1" align ="Center">
<tr align =“Center">
<td Valign="bottom"> Roll_No
</td>
<td>Name </td>
</tr>
<tr>
<td>100 </td>
<td Valign=“Top"> Komal </td>
</tr>
</table>

Frame
The frame Attribute is used to specify the visibility of
outside borders.
Syntax
<table frame="value">

Attribute Values
void: It is used to hide the outside border.
above: It is used to display the top outside border.
below: It is used to display the bottom outside border.
hsides: It is used to display the top and bottom outside border.
vsides: It is used to display the left and right outside border.
lhs: It is used to display the left outside border.
rhs: It is used to display the right outside border.
box: It is used to display all sides outside border.
border: It is used to display all outside border.

<table frame="box">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>

<table frame="vsides">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>

<table frame=“hsides">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>

Rules
The rules Attribute is used to specify the
which parts of the inside borders that should
be visible.

Syntax
<table rules="value">
Attribute Values
•none : It does not create any lines.
•Groups : It create lines between row and column
groups.
•Rows : It creates line between the rows.
•Cols : It creates line between the columns.
•All : It creates line between the rows and
columns.

<table rules="rows">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>

<table rules="cols">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>

<table rules="all">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>

html-table

More Related Content

html-table