HTML tables allow arranging data into rows and columns using <table>, <tr>, and <td> tags. Tables are useful for displaying tabular data and have various attributes to control appearance, such as border, width, background, alignment, and rules to display lines between cells. Common table attributes include border to set border thickness, bgcolor to set background color, and align to position the table on the page.

1. HTML-Table

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

3. Table Structure

4. HTML tables allow web developers to
arrange data into rows and columns.
Html table has following element
1. < table >
2. < tr >
:The <table> tag defines an HTML table.
: 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”

5. <table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

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

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

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

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

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

11. 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%”>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

33. THAN
K
YOU