Scribd
Upload
4 views

Tables in HTML

How to make tables in HTML

Uploaded by

Amal Rana
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Tables in HTML

How to make tables in HTML

Uploaded by

Amal Rana
Copyright
© © All Rights Reserved
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