Topic: Tables in HTML
Definition: The HTML tables are used to arrange data into rows and columns. HTML tables are
created using the <table> tag. The <tr> tag is used to create table rows and <td> tag is used to
create cells in row. The elements under <td> are regular and left aligned by default
Table Heading
The <th> tag is used for table heading. It is used in <tr> tag in place of <td> tag. Headings,
which are defined in <th> tag are centered and bold by default.
Attributes of <table> tag
1. Border Attribute
The border attribute specifies if a border should be displayed around the table cells
or not. It has following syntax
<table border="1 or 0">
0 show absence of border and 1 indicates presence of border around table cells.
2. Cellspacing
Cellspacing represents the space between cells. It sets space between cells in terms
of pixels. It has following syntax
<table cellspacing="number of pixels">
3. Cellpadding
Cellpadding is used to specify the space between the cell value and cell border. It
sets space in terms of pixels.
<table cellpadding=" number of pixels ">
4. Align
The align attribute is used to specify the alignment of the table and its content. By
default alignment is left. It has following syntax.
<table align="left or right or center">
left: It sets the left align to the table. It is a default value.
right: It sets the right align to the table.
center: It sets the center align to the table
5. Valign
It is used to define the vertical alignment of the content of a table cell. It has following
syntax.
<td valign="top | middle | bottom | baseline">
top: It sets the content to top-align.
middle: It sets the content to middle-align.
bottom: It sets the content to bottom-align.
baseline: It sets the content to baseline. It is a default value.
6. Nowrap
Nowrap attributes prevents text in a cell from wrapping. All text in a cell appears on
one line. It can be with <td> and <th> tags. It has following syntax.
<td nowrap>text</td>
7. Colspan
It is used to span a cell over multiple columns. It can be with <td> and <th> tags. It
has following syntax.
<td colspan = "number of columns">
8. Rowspan
It is used to span a cell over multiple rows. It can be with <td> and <th> tags. It has
following syntax.
<td rowspan = "number of rows">
Exampe 1: Create table in html.
<html>
<body>
<table>
<tr>
<th> Roll No</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td> Daud</td>
<td>1</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Example 2: Creating a table , set border, cellspacing value 20, cellpadding value 10,
align table to right, align table contents to bottom . Use nowrap and colspan
attributes as well.
<html>
<body>
<table border="1" cellspacing="20" cellpadding="10"
align="left">
<tr>
<th colspan="3">Student data</th>
</tr>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td nowrap>1</td>
<td valign="center">Ali</td>
<td valign="bottom">98</td>
</tr>
</table>
</body>
</html>
