0% found this document useful (0 votes)

12 views

HTML Table

The document discusses various attributes used to control the styling and formatting of HTML tables. It explains that tables are made up of rows (<tr>) and cells (<td>), and that attributes like border, bgcolor, width, height, cellspacing, cellpadding, colspan and rowspan allow customizing the appearance of tables and individual cells. Specific examples are given showing how to apply each of these attributes in HTML code to achieve the desired table formatting.

Uploaded by

Anshu Jayswal

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

12 views

HTML Table

Uploaded by

Anshu Jayswal

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 43

Tables

HTML table model allows us to arrange data in tabular structure, using

a model of horizontal rows and vertical columns. A table is divided into
rows and each row is divided into cells.
A sample Table structure

The above table structure consists of 4 rows and 5 columns .

Tables in HTML
An HTML Table start with < table > tag and ends with < /table > tag.
A table can contain an infinite number of table rows.
A table row start with < tr > tag and ends with < /tr > tag.
Each Table Row is divided into cells.
A Table cell start with < td > tag and end with < /td > tag.
HTML Table with rows and columns
The following HTML code create an HTML Table with 2 rows and each
rows contain 2 columns and fill the content A,B,C,D in cells
respectively.

HTML Source Code :

** If you want to see the table border looks like in the above picture,
you should replace < table border=1 > in the above HTML code,
otherwise no border will display.
Table layout structure in picture
In the above picture you can see the Table starts with < table > and end
with < /table > tag and each row start with < tr > and end with < tr/ > tag
and each cells start with < td > and end with < /td > tag.

Table Border
The HTML Table Border attribute sets the width of Border around the
table and table cells. We can set the Border attributes in pixels.
<table border="2">

In the above HTML code we set the Border attribute to 2, this applies a
border to each cell, and to the table as a whole. But whatever values you
to set in the Border attribute, only the size of the border around the table
will change, the border of the table cells remain 1 pixel width.
HTML Source Code :
<html>
<body >
<table border=5>
<tr>
<td>
January
</td>
<td>
February
</td>
</tr>
<tr>
<td>
March
</td>
<td>
April
</td>
</tr>
</table>
</body>
</html>

In the above HTML code we set border=5 , you can see only the Border
around the table will change the size to 5 , but cells border inside the
table will remain 1 pixel.
HTML Table Bordercolor
The bordercolor attribute will change the color of the border around
your table. You can directly type the color names or you can use
hexadecimal codes of colors to Boardercolor attribute.
<table border=5 Bordercolor=red>
You can set additional two border color attributes to HTML Table, they
are bordercolorlight and bordercolordark attributes. It will give you a
3D effect to your HTML Table.
<table border=5 bordercolorlight=green bordercolordark=blue>

Table with no Border

By default there is no border around HTML Table and Table Cells. If
you want to hide (No Border) Border permanently, you can set this
property to either 0 or -1 .

HTML Table Width

The width attribute specifies the width of a table or the width of a table
cell. The width can be set either as an absolute value in pixels, or as in
percentage (%). If the width attribute is not set, it will takes up the space
of longest single word in each cell.
Table width in pixels

<table border=1 width=100>

Table width in percentage (%)

The width value 100% indicates a width for the table that is the full
width of the browser window.
<html>
<body >
<table border=1 width=100>
<tr>
<td>
Table width is 100 pixel
</td>
</tr>
</table>
<br>
<table border=1 width=100%>
<tr>
<td>
Table width is 100 %
</td>
</tr>
</table>
</body>
</html>

The above HTML code display two tables, one is 100 pixel width and
another one is 100% width. First table is only 100 pixel width in any
changes in browser window state, while other table will always stretch
the full width of the window it is viewed in, that is the table
automatically expands as the user changes the window size when you
set width in % .
Cell Width or Column width
You can set the width of a table cell using width attribute.
<td width=30%>
The < td > width can be set either as an absolute value in pixels, or as in
percentage (%).

<html>
<body >
<table border=1 width=400>
<tr>
<td width=30%>
Cell width is 30%
</td>
<td width=70%>
Cell width is 70%
</td>
</tr>
</table>
</body>
</html>

Note: The width attribute of < td > is deprecated in HTML 4.01.

Table Height
Height attributes can be added to the < table > tag as well as the < td >
tag.
<table height=400>

The height attribute is not recognized by certain browsers, so be sure to

do cross browser testing if you are relying on it.

Adding Colors and Pictures to HTML Table

We can change background of a table in two ways. We can add different
Colors as background of an HTML Table as well as we can add pictures
as a Table background.
HTML Background Color
We can use bgcolor attribute of a Table to add colors as background.
<TABLE border=1 bgcolor=red>

You can use color names or use hexadecimal color code in bgcolor
attribute.

<html>

<body >

<table border=1 bgcolor=#DDDDDD>

<tr>

<td>

Background color

</td>

</tr>

</table>

</body>

</html>

Cell background color

You can set bgcolor attribute either in Table level or in each Cells.
<td bgcolor=red>

The above code will change only the particular cell color to red.

<html>

<body >

<table border=1 >

<tr>

Background red color

</td>

Background green color

</td>

</tr>

</table>

</body>

</html>

HTML Table Background Images

The background attribute allows you to change the background inside
your table to that of an image of your choice.

<table border=1 background="bg-red.png">

Cell Background Images
You can set background images to each cells.

<td background="bg-red.png">
If the image dimensions are smaller than the table dimensions and there
is enough space in the table, the image will repeat.
Note : The bgcolor and background attributes are deprecated in HTML
4.01.
http://www.tagindex.net/html/table/table_background.html
visit this link

Cellspacing
The Cellspacing attribute places space, in pixels, around each cell in the
table.
<table border="1" cellspacing="5">

The above code will Set the space between the cells to 5 pixels .
<html>

<body >

<table border=1 bgcolor=red cellspacing=15>

<tr>

January

</td>

February

</td>

</tr>

<tr>

March

</td>

April

</td>

</tr>

</table>

</body>

</html>

In the above HTML code we set cell-spacing as 15. That means each
adjacent table cells create 15 pixels space to another. For display
purpose set the table background Color as Red and Cell background
Color as White. So you can see the cell spacing in red color.
If you want no spaces at all, you should set Cellspacing="0", otherwise
the default is Cellspacing="1" will set, even if you don't mention
Cellspacing. The below picture is the same HTML code with default
Cellsapcing, that is no Cellspacing is set or Cellspacing="1" .
The cellspacing is applied both vertically and horizontally. The cell
spacing is uniform for the entire table. Individual cell spacing between
each row or column cannot be specified.
The Cellspacing attribute is similar to the cellpadding attribute, which
control the spacing between the contents of a Cell and the Cell's border.

Cellpadding
CellPadding attribute is used to control the spacing between the contents
of a Cell and the Cell's border.

<table border="1" cellspacing="5">

The above code set the space between the Cell border and the Cell
content to 5 pixels.

The above picture shows an HTML Table with cellpadding=15 and

another one is HTML Table with no Cellpadding.
HTML Source Code :
<html>

<body >

<table border=1 cellpadding=15>

<tr>

<td>

January

</td>

<td>

February

</td>

</tr>

<tr>

<td>

March

</td>

<td>

April

</td>

</tr>

</table>

</body>

</html>

The Cellpadding is uniform for the entire table, individual Cellpadding

in Table Cells cannot be specified. The padding amount specified is
added to all four sides of the cell.
Basically, cellpadding allows for more "white space" , if you want no
spaces around your text inside the Table Cell, you should set
Cellpadding="0", otherwise the default is Cellpadding="1" will set ,
even if you don't mention Cellpadding.
The cellpadding attribute is similar to the cellspacing attribute, which is
used to create space between and outside of the table cells.

Colspan and Rowspan

A table is divided into rows and each row is divided into cells. In some
situations we need the Table Cells span across (or merged) more than
one column or row. In these situations we can use Colspan or Rowspan
attributes.

Colspan
The colspan attribute defines the number of columns a cell should span
(or merge) horizontally. That is, you want to merge two or more Cells in
a row into a single Cell.

<td colspan=2 >

The above code will merge two Cells as one Cell horizontally.

The above image shows two tables . The first HTML Table has 2 rows
and 2 columns in each row. The second HTML Table has 2 rows and 1
column in first row and 2 column in second row. In the second Table we
merge first two Cells horizontally using Colspan attribute. You can see
the second Table HTML code below.
How to colspan ?
HTML Source Code :
<html>

<body >

<table border=1 >

<tr>
<td colspan=2>
Merged

</td>

</tr>

<tr>

<td>

Third Cell

</td>

<td>

Forth Cell

</td>

</tr>

</table>

</body>

</html>

Colspan (Column Span) merged Cells horizontally that is from left to

right. The default value of Colspan is 1.
Rowspan
The rowspan attribute specifies the number of rows a cell should span
vertically. That is, you want to merge two or more Cells in the same
column as a single Cell vertically.
The above code will merge two Cells as one Cell vertically.
The above picture shows two tables. First table has 2 rows and each
rows has 2 columns. The second Table has 2 rows in the first column
and ony 1 row in the second column. That is we use Rowspan attribute
vertically in the second column. You can see the second Table HTML
code below.
How to Rowspan?
HTML Source Code:
<html>

<body >

<table border=1 >

<tr>

<td>

First Cell

</td>

<td rowspan=2 >

Merged

</td>

</tr>

<tr>

Third Cell

</td>

</tr>

</table>

</body>

</html>

Rowsapn merged Cells vertically , that is from top to bottom.

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, Table Alignment and the alignment of content inside the
Table Cells.
How to Align HTML Table
Alignment of the Html Table element defines the horizontal alignment
of the Table inside the next outer container. This does not control the
alignment of the contents inside the cells of a Table. You can Align an
HTML Table left, right, and center horizontally inside the next outer
container.

<table border="1" align="right">

The above code will align the Table at the right side of the next outer
container.

In the above picture you can see three tables align left, center, and right
respectively.
HTML Source Code :
<html>

<body >

<table border="2" align="left">

<tr><td>Table 1</td></tr>

<tr>
<td>Align Left</td>

</tr>

</table>

<table border="2" align="center">

<tr><td>Table 2</td></tr>

<tr>

<td>Align Center</td>

</tr>

</table>

<br>

<table border="2" align="right">

<tr><td>Table 3</td></tr>

<tr>

<td>Align Right</td>

</tr>

</table>

</body>

</html>

Note: The align attribute is supported in all major browsers, but it is

deprecated in HTML 4.01.

Cell Content Align

Align attribute of Table can be positioning Tables and their contents in
relation to other elements on the Web page. Align attributes can be set
in two levels, Table Alignment and the alignment of content inside the
Table Cells.
Table content Align
In order to control the alignment of contents of an individual cell, use
the Align and Valign attributes to < td > tags. Align attribute can
position your content horizontally inside the Cell in three ways like
Left , Right and Center. VAlign attribute can position your content
Vertically inside the Cell in four ways like Top, Bottom, Middle and
Baseline.

In the above picture there are two tables , first table has three columns
and each column Align horizontally left, right and center respectively.
The second table has three columns and each column vertically align
Top, Bottom and Middle respectively.
HTML Source Code :
<html>

<body >

Horizondal Align (Align) <br><br>

<table border="2" width=300>

<tr>

<td align=Left >Left</td>

<td align=Right>Right</td>

<td align=Center>Center</td>

</tr>

</table>

Vertical Align (VAlign) <br><br>

<table border="2" width=300>

<td valign=top >Top</td>

<td valign=bottom>Bottom</td>
<td valign=middle>Middle</td>

</tr>

</table>

</body>

</html>

You can also control the alignment of contents of the cells in an entire
row by using the Align and VAlign attributes to < tr > tag.
<tr align=Left>

The above code horizontally Align the contents of the cells in an entire
row to Left of the Cell.
<tr valign=middle>

The above code Vertically Align the contents of the cells in an entire
row to Middle of the Cell.
Note: The align attribute is supported in all major browsers, but it is
deprecated in HTML 4.01.

Tags inside table

An HTML table contains a set of columns and actual data rows and each
row consists of one or more cells. Inside Table Cells you can add other
HTML tags other than normal text like Image, Links , List , Tables etc.
How to add an Image inside a Table Cell
You just put an img tag inside the table cell (< td > tag).
<tr>

<td >

</tr>

The src attribute's value can be any valid URL of an image on the Web ,
local or remote.
How to add a Link inside a Table Cell
Hyperlink is a pointer from one HTML document to another one, the
target may be same website location or some other location on the
Internet. You can add links inside the Table Cells.
<tr>

<td>

<a href="www.mywebsite.com/about.html>About</a>

</td>

</tr>

How to add a List inside a Table Cell

HTML Lists are used to group related pieces of information together.
You can add Lists in HTML Table Cells.
<tr>

<td>

<ul>

<li>Csharp</li>

</ul>

</td>

</tr>

How to add a Paragraphs inside a Table Cell

HTML Paragraphs are used to format text divided into sections. The
Paragraphs in HTML are defined inside the < p > and < /p > tags. You
can add Paragraphs to HTML Table Cells.
<tr>

<td>

<p> HTML stands for Hyper Text Mark-up Language, one of the document formats of the World
Wide Web. </p>

</td>

</tr>
Put all together inside a Table.

The above image shows a Table contains Image, Link, List and
Paragraph inside the Table Cells.
HTML Source Code :
<html>
<body >
<table border="2">
<tr >
<td>
<p> This table contain Image , link, <br> List and
Paragraph tags </p>
</td>
<td>
<img src="image.png">
</td>
</tr>
<tr>
<td>
<ul>
<li>VB.Net</li>
<li>Csharp</li>
<li>Asp.Net</li>
</ul>
</td>
<td>
<a href="www.mywebsite.com/about.html">About</a>
</td>
</tr>
</table>
</body>
</html>
How to Nested Tables in HTML
Nesting tables simply means making a Table inside another Table.
Nesting tables can lead to complex tables layouts, which are both
visually interesting and have the potential of introducing errors depends
on its nesting nature.
Tables within Tables
Nested Table always need to be placed between < td > ... < /td > tags of
the outer container Table. You can format nested tables as you would
format any other HTML Table.
The following HTML code create a Table with one row and two column
and inside the second column again create another table (nested table)
with two rows.
In the above picture the outer table with red colors and Inner table with
Green color.
HTML Source Code :
<html>

<body >

<table border=5 bordercolor=red>

<tr>

<td>

Fisrt Column of Outer Table

</td>

<td>

<table border=5 bordercolor=green>

<tr>

<td>

First row of Inner Table

</td>

</tr>

<tr>

<td>

Second row of Inner Table

</td>

</tr>

</table>

</td>

</tr>

</table>
</body>

</html>

Tables inside a Table Cell

Nesting tables can lead to more complex tables, inner Table should
begin and end in the same cell of the outer container table. You can
nested tables any number of levels. The following HTML code create a
four level nested tables.

In the above picture the outermost table with color Red and nested table
with color Green , Yellow and Blue respectively.
HTML Source Code :
<html>

<body >

<table border=15 bordercolor = red>

<table border=15 bordercolor = green>

<table border=15 bordercolor = yellow>

<table border=15 bordercolor = blue>

</td></tr>

</table>

</td></tr>
</table>

</td></tr>

</table>

</td></tr>

</table>

</body>

</html>

You can format or placed other HTML Tags inside nested tables as you
would do any other HTML Table. The following HTML code create an
outer Table with two rows and each row has two columns. Each nested
table add other HTML tags like Image, Links , List , Text etc.

HTML Source Code :

<html>

<body >

<table border=5 bordercolor = red>

<tr>

<td >

First Nested Table

</td></tr>

</table>

</td>
<td >

<ul>

<li>Csharp</li>

</ul>

</td></tr>

</table>

</td>

</tr>

<tr>

<td >

<a href="www.mywebsite.com/about.html">About</a>

</td></tr>

</table>

</td>

<td>

</td></tr>

</table>

</td>

</tr>

</table>

</body>

</html>
The more tables you have nested inside one another, the slower the page will load. It gets
more complicated for the browser to render, and so the page loads more slowly.

Website layout with tables 1

A table contains a set of columns and actual data rows and each row
consists of one or more cells. Inside Table Cells you can add other
HTML tags other than normal text like Image, Links , List , Tables etc.
Also you can create nested Tables. Nesting tables can lead to complex
tables layouts.
The following picture shows an image of a simple website layout using
html tables.

The above picture shows a common website layout. The top part is
using for display Website Name or Website Logo. Left side part is using
for Menu and right side is for Advertisements. The center position is
using for display your website content and the bottom part is for Footer
like copy right information , sitemap , about etc.
The following HTML code give you what exactly shows in the picture.
Copy and paste the following html code and save it as an html file.
HTML Source Code :
<html>

<body >

<table border=2 bordercolor=red width=98% align=center>

<tr><td align=center colspan=3>

WEBSITE NAME

</td></tr>

<tr>

<td width=15% align=center>

</td>

<td width=70% align=center>

You Can write your main content here

</td>

<td width=15% align=center>

ADVT

</td>

</tr>

<tr><td align=center colspan=3>

FOOTER

</td></tr>

</table>

</body>
</html>

The above HTML code create a simple website layout and has no
nested tables. The content area is filled with HTML < br > (line break)
tag for display purpose, so you can replace < br > tags and write your
content inside the content area.

Website layout with tables 2

The following picture shows an image of a simple website layout using
html tables.

In the picture the top part is for display website logo and left down is the
content area and right side you can put Menu there and as usual footer is
the bottom location.
When you creates a website layout , it is better to avoid nested tables.
Nesting tables can lead to complex tables layouts and increase in page
load time.
The following HTML code give you what exactly shows in the picture.
Copy and paste the following html code and save it as an html file.
HTML Source Code :
<html>

<body >

<table border=2 bordercolor=red width=98% align=center>

<tr><td align=center colspan=2>

WEBSITE NAME

</td></tr>

<tr>

<td width=70% align=center>

You Can write your main content here

</td>

<td width=30% align=center>

</td>

</tr>

<tr><td align=center colspan=3>

<br>

FOOTER

<br>

</td></tr>

</table>

</body>

</html>

The content area is filled with HTML < br > (line break) tag for display
purpose, so you can replace < br > tags and write your content inside the
content area.

Website layout with tables 3

The following picture shows an image of a simple website layout using
html tables.

The top part is for displaying website logo and just after that display
menu as horizontally. After that a wide content area part and bottom
side is for footer area.
When you creates a website layout , it is better to avoid nested tables.
Nesting tables can lead to complex tables layouts and increase in page
load time.
The following HTML code give you what exactly shows in the picture.
Copy and paste the following html code and save it as an html file.
HTML Source Code :
<html>

<body >

<table border=2 bordercolor=red width=98% align=center>

WEBSITE NAME

<br>

</td></tr>

<tr>

You Can write your main content here

</td>

</tr>

<tr><td align=center colspan=3>

<br>

FOOTER

<br>

</td></tr>

</table>

</body>

</html>

The frame attribute of the TABLE element specifies which sides of the
outer border are displayed.

Attribute Value Explanation

frame=" void removes all outer borders
"
lhs displays the left-hand side only

rhs displays the right-hand side only

vsides displays the left and right sides

only

above displays the top side only

below displays the bottom side only

hsides displays the top and bottom

sides only

box displays all sides

border displays all sides

Example

void (Removes all outer borders)

<table border="5" frame="void">
<tr>
<td>Row1 - Col1</td>
<td>Row1 - Col2</td>
<td>Row1 - Col3</td>
</tr>
<tr>
<td>Row2 - Col1</td>
<td>Row2 - Col2</td>
<td>Row2 - Col3</td>
</tr>
</table>
Output
Row1 - Col1 Row1 - Col2 Row1 - Col3
Row2 - Col1 Row2 - Col2 Row2 - Col3