Scribd
Upload
5 views

Tables in HTML

How to make tables in HTML

Uploaded by

Amal Rana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Tables in HTML

How to make tables in HTML

Uploaded by

Amal Rana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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>

You might also like