Table in HTML14 min read

Introduction

A table in HTML is a two-dimensional matrix consisting of rows and columns. HTML helps you to present the information in a tabular form i.e. in the form of rows and columns. The basic element of the table is the cell (Intersection of Rows and Columns) or the grid. In a table, cells are arranged from left to right and from top to bottom. By default, each cell in a table is spread across one row and one column. One can use other HTML formatting tags with tables to improve its appearance for better presentation. One can create a table in HTML using the tag <TABLE>.

Example of table in HTML

Thus the table is useful to store the information. It stores data in tables in the form of rows and columns where each row represents a record and each column represents the field.

Table Usage

In the following situation displaying data in tabular format is useful,

Express Relationship: It is usually used to display the relationship among columns within the table. For example, Roll_no, Name, and Address show that it constitutes student information.

Tabular form: Tables enable the show or display information in a tabular form rather than simply a textual form.

Control Layout: It helps a web designer to control the layout of text and position a group of images that is usually used in a newspaper publication.

Features of Table in HTML

  1. One can change the height and width of a single cell.
  2. Span table cells across rows.
  3. Span table across columns.
  4. All column data are aligned properly.
  5. Can provide the spaces between cells.
  6. Inserting image within a table cell.
  7. Hyperlink table cell item.
  8. Nesting Tables etc.

TABLE Tag

All table-related tags are included between the pair tags <TABLE>..</TABLE>. Each row of the table is described between the <TR>..</TR> tags while each column of a table is described between pair tags <TD>..</TD>. Here,

  • <TR> tag specifies table row and is a non-empty or pair tag.
  • <TD> tag specifies table cell or table data.

Types of Table Rows

HTML supports two types of rows,

1) Header Rows: A text that spans across the columns of the table is called the Header rows and it automatically appeared in the center and in boldface. It is useful to identify the column heading for the data value entered for the column. It is specified using pair tags <TH>..</TH>. Here TH stands for Table Head.

2) Data Rows: It is the default table row and contains data within a cell. It is specified using pair tag <TD>..</TD>. Here TD stands for Table Data.

Attributes of TABLE

The attribute of the table and related tags within the table is given below, 

Sr.No.TAGAttributeValue RangeDescription
1)<TABLE>BORDER

BORDERCOLOR 

CELLSPACING


CELLPADDING

WIDTH
1-100%

RGB Codes
1-100% Pixels

1-100%Pixels
1-100%
Specifies a visible border and its Pixels thickness.
Specify the color of the outside border.
Specifies the amount of spacing between Pixels table cells
Specifies amount spacing inside table cells. 
Specifies the width of the table relative
2)<TR>, <TD>ALIGN


BGCOLOR

VLIGN


COLSPAN


ROWSPAN
Left, Center, Right
RGB Codes
Top, Middle, Bottom

Specifies the horizontal alignment of text Center, within a row or individual cell. 
Specifies a fill color for rows or cells. 
Specifies the vertical alignment of text Middle or within a row or individual cell. 
Specify the cell defined by the tag to make more than one column. 
It allows a cell to take up more than one row.
3)<CAPTION>ALIGNTop, BottomSpecify a table heading or title for a table.
4)<TH>BGCOLORRGB CodesSpecifies a column heading. One can also specify the color for it.

Note: If the Border attribute is not specified then data will not be displayed in the grid format.

Demonstration of Basic Table

<HTML>
 
 <HEAD> <TITLE> DEMO OF BASIC TABLE CREATION </TITLE> </HEAD> 
 
  <BODY> 
 
   <TABLE>
    
   <TR><TH> NAME </TH> <TH> MOBILE </TH> 
   <TR><TD> AKHIL </TD> <TD> 9850000000 </TD> 
   <TR><TD> ANAND </TD> <TD> 9811000000 </TD>
    
   </TABLE>
 
  </BODY>
 
</HTML>

Adding Border to a Table in HTML

By default, table data is not shown with a border. To get border use attribute BORDER with tag <TABLE>. If the BORDER attribute is present without any value then a border of two pixels is drawn around the table

Syntax: <TABLE BORDER=”Number”>

By default, the Border value is zero (0) when not specified.

Demonstration of Adding Border 

<HTML> 
 
 <BODY> 
  
  <TABLE BORDER="2">  
  <TD> This is single Cell Table </TD>  
  </TABLE> 
  
 </BODY>
  
</HTML>

Determining the Table Size (Width Attribute)

By default table width is determined by the browser as per the contents of size within the table. One can specify the width of the table in pixels or in percentage using the attribute WIDTH in the tag <TABLE>.

Syntax: <TABLE WIDTH= “Pixel” > 

Example <TABLE WIDTH = “150”

It will set the width of the table to 150 pixels irrespective of the browser’s window size.

Code for Changing table size

<HTML>

  <BODY>
  
    <TABLE WIDTH="440" BORDER="2">
    
    <TD> THIS IS SINGLE CELL TABLE </TD>
    
    <TABLE> 
    
  </BODY>
   
</HTML>

Adding Cells to a Table

All the data in the table goes into cells. You can add cells to the table using tag <TD> known as table data. You can add as many as cells using these features.

Demonstration of Adding Cells to Table

<HTML> 

 <BODY> 
 
  <TABLE BORDER="2"> 
 
   <TD>
    FIRST CELL 
   </TD> 
 
   <TD>
    SECOND CELL 
   </TD> 
 
  </TABLE> 
 
 </BODY> 
 
</HTML>

Adding Rows to a Table

One can add as many rows to a table just like adding cells using tag <TR> known as Table Rows.

Demonstration of Adding Rows to a Table

<HTML> 

 <BODY> 
 
  <TABLE BORDER="2"> 
   
   <TD> 1ST CELL OF 1ST ROW </TD> 
   <TD> 2ND CELL OF 1ST ROW </TD>
   
   <TR> 
   
    <TD> IST CELL OF 2ND ROW </TD>
    <TD> 2ND CELL OF 2ND ROW </TD> 
  
  </TABLE> 
  
 </BODY> 

</HTML>

Designing Table Background Color

One can add color to the entire table or individual cells to enhance the contents To add color to the entire table, include attribute BGCOLOR to the tag <TABLE>. To add color for individual cell use BGCOLOR attribute with <TR> <TD> or <TH> tags

Demonstration of Table with border and color for each column and caption for displaying personal information 

<HTML>

 <HEAD> <TITLE> DEMO OF BORDER WITH COLUMNS COLOR </TITLE> </HEAD> 

  <BODY>

    <TABLE BORDER="3" BGCOLOR="BLUE" WIDTH="30%">
      
    <CAPTION ALIGN="BOTTOM"> <B> Personal Information </B> </CAPTION> 
      
    <TR> <TH BGCOLOR="GRAY"> NAME </TH> <TH BGCOLOR="WHITE"> MOBILE </TH> 
    <TR> <TD BGCOLOR="GRAY">AKHIL</TD> <TD BGCOLOR="WHITE"> 9850000000</TD> 
    <TR> <TD BGCOLOR="GRAY">ANAND</TD> <TD BGCOLOR="WHITE">9811000000</TD> 
    
    </TABLE>
      
  </BODY>
      
</HTML>

Changing Background of Table

One can set the background of the table by using images. One must specify the URLs for this purpose. The image is tiled if the image is smaller than the table dimension. 

Syntax <TABLE BACKGROUND= “URL”> 

Example <TABLE BACKGROUND = “SUNSET.JPG”>

CELLPADDING Attribute

It helps to specify the spacing between cell contents and cell wall. 

Syntax) <TABLE CELLPADDING=”VALUE”>

One can specify value either in pixels or as a percentage of the entire cell space. 

Example) <TABLE CELLPADING=”25″>

Demonstration of cell padding attributes 

<HTML>
 
 <HEAD> <TITLE> DEMO OF CELLPADDING </TITLE> </HEAD> 
 
  <BODY>
  
   <TABLE BORDER="3" CELLPADDING="25" WIDTH=30%>
   <CAPTION ALIGN="BOTTOM"><B> Personal Information </B> </CAPTION>
   <TR> <TH> NAME </TH> <TH> MOBILE </TH> 
   <TR> <TD> AKHIL </TD> <TD> 9850000000 </TD>
   <TR> <TD> ANAND </TD> <TD> 9811000000 </TD>
   
   </TABLE> 
  
  </BODY> 
  
</HTML>

CELLSPACING Attribute

This attribute helps to specify the spacing between cells in pixels. Syntax <TABLE CELLSPACING=”VALUE”> Example <TABLE CELLSPACING=”20″

Demonstration of cell spacing attributes 

<HTML>
  
 <HEAD> <TITLE> DEMO OF CELLSPACING </TITLE> </HEAD> 
  
  <BODY> 
  
   <TABLE BORDER="3" CELLSPACING="20" WIDTH=30%>
   
   <CAPTION ALIGN="BOTTOM"> <B> Personal Information </B> </CAPTION>
   <TR><TH> NAME </TH> <TH> MOBILE </TH>
   <TR><TD> AKHIL </TD> <TD> 9850000000 </TD>
   <TR><TD> ANAND </TD> <TD> 9811000000 </TD> 
   
   </TABLE>
  
  </BODY>
  
</HTML>

CELL SPANNING (Asymmetrical Table)

When one merges rows and columns of the table then it is referred to as Spanning. This mechanism allows you to create asymmetrical tables and helps to accommodate images or large blocks of data. It is mainly used to write a title of rows or columns. Two attributes that help to create cell spanning are ROWSPAN and COLSPAN and attach with the tag <TD> or <TH>.

ROWSPAN Attribute: It specifies the number of rows the cell can span. The default span for any cell is one. If ROWSPAN value is set to zero then the cell spans across all rows from the current row to the last row in the table.

COLSPAN Attribute: It specifies the number of columns the cell can span. The default span for any cell is one.

Demonstration of rowspan and colspan attributes

<HTML>

  <HEAD> <TITLE> DEMO OF ROWSPAN AND COLSPAN </TITLE> </HEAD> 
  
   <BODY>
    
    <TABLE BORDER="20" WIDTH=30%>
    
    <CAPTION ALIGN="BOTTOM"> <B> RESULT </B> </CAPTION>
    
    <TR> <TH COLSPAN="3"> ICAT COMPUTER </TH> 
    <TR> <TH ROWSPAN="2"> NAME </TH> <TH COLSPAN="2"> MARKS </TH> 
    <TR> <TH>JAVA Script </TH> <TH> VB Script </TH> 
    
    <TR><TD> AKHIL </TD> <TD> 60 </TD> <TD> 70 </TD> 
    <TR><TD> ANAND </TD> <TD> 65 </TD> <TD> 75 </TD>
    
    </TABLE> 
    
   </BODY>

</HTML>

TABLE ALIGNMENT PROPERTIES

a Table tag <TABLE> supports two kinds of attributes for alignment. They are, 

  1. ALIGN: Specifies the horizontal alignment of text within a row or individual cell. Align values can be set Left, Center, or Right. 
    1. Left Alignment: It will align the text on the left side of the cell. It is a default alignment when not specified.
    2. Center Alignment: It will align the text centrally within cell width.  
    3. Right Alignment: It will align the text on the right side of the cell.
  1. VALIGN: Specifies the vertical alignment of text within a row or individual cell. Valign values can be set Top, Middle, or Bottom. a
    1.  ALIGN = “TOP”: Align the text to the top of the cell in the vertical box i.e. it arranges the contents at the top of the cell.
    2. ALIGN = “MIDDLE”: Align the text to the center of the cell in the vertical box: It is a default alignment when not specified.
    3. ALIGIN=”BOTTOM”: Align the text to the bottom of the cell in the vertical box.

EMBEDDING IMAGE IN A TABLE

One can also insert an image as data within the table cell. Simply enclose <IMG> tag within <TD> tag.

Demonstration of inserting images in a table

<HTML>

 <HEAD> <TITLE> DEMO EMBEDDING IMAGE IN TABLE </TITLE> </HEAD>
 
  <BODY>
   
   <TABLE BORDER=10 WIDTH=30%> 
   
    <TR><TD> Worrying does not take away tomorrow's troubles. It takes away today's peace. 
    <TD> <IMG SRC="SUNSET.JPG" HEIGHT=100</TD>
    
    <TR><TD> <IMG SRC="SUNSET.JPG" HEIGHT=100</TD> 
    <TD> So just relax and enjoy today and don't think of worries of tomorrow's. </TD>
    
   </TABLE> 
  
  </BODY> 
  
</HTML>

NESTING OF TABLES

One can nest a table (Slave) within another table called the main or master table. One can use other formatting tags with a table to improve its appearance for better presentation. HTML does not provide any special tag for this purpose. It is advisable not to add any border to the slave table.

Demonstration of Nested Table

<HTML> 
 
 <BODY> 
 
  <TABLE BORDER="2">  
  
   <TD> 
    
    THIS IS DEMO OF 
    
    <TABLE WIDTH="100" BORDER="2"> 
    <TD> NESTED </TD> THIS IS DEMO OF 
    </TABLE> 
   
    <TABLE>
   
   </TD> 
   
  </TABLE>  
  
 <BODY> 
 
</HTML>

CREATING HYPERLINKS IN CELL

It is possible to hyperlink each cell of the table so that it will either load another HTML document or move to another section within the current document.

Demonstration of a hyperlink for cell 

<HTML>
 
 <HEAD> <TITLE> DEMO HYPERLINK FOR A CELL IN A TABLE </TITLE> </HEAD> 
 
 <BODY>
 
  <TABLE BORDER=10 WIDTH=40%>
    
   <TR> <TD> <A HREF="TABLE1.HTML"> DEMO OF TABLE </A> </TD>
    <TD> <A HREF="IMAGE1.HTML">DEMO OF IMAGE </A> </TD> 
   
   <TR> <TD> <A HREF="FLOATINGIMAGE.HTML"> DEMO OF FLAOTING IMAGE </A> </TD> 
    <TD> <A HREF="MARQUEE.HTML"> DEMO OF MARQUEE </A> </TD> 
  
  </TABLE> 
  
 </BODY>
 
</HTML>

Creating Drop Caps

It is a way of emphasizing the text with the first letter of the paragraph to be big enough to run into 2-3 lines In HTML, One can combine text formatting tags along with a table to create drop cap letters that are usually used in the publication.

Demonstration of Drop Cap Letter 

<HTML>

 <HEAD> <TITLE> Demo of Drop Cap </TITLE> </HEAD> 

  <BODY>
  
   <H3> Initial Drop Cap Letter </H3> 
    
   <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> 
    
     <TR>
      <TD FONT SIZE =7 ALIGN=LEFT><B>W</B></TD> 
      <TD VALIGN=TOP ALIGN=LEFT>ord is the application software and one of the most powerful
        word processor in Windows operating system. </TD> 
     </TR>
  
     <TR>
      <TD COLSPAN=2> In simple meaning it is a word processor having various functions for the 
       text you may insert different objects like pictures, sound, etc in a word file. 
      </TD>
     </TR> 
  
   </TABLE> 
  
  </BODY> 
 
</HTML>

Share:

Leave a Reply