HTML18 Create the following table in HTML with Dummy Data

By | April 14, 2018

Create the following table in HTML with Dummy Data

Table_Pattern_01 

Table Tags

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

HTML_Table_Rowspan_Colspan_Page

HTML_Table_Rowspan_Colspan_Source_Code

 

Create the following table in HTML with Dummy Data

Table_Pattern_01Html code:

 <!DOCTYPE html>
 
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML18</TITLE>
</HEAD>
<BODY bgColor="yellow" Text="blue">
<TABLE BORDER="5" WIDTH="100%">
<TR>
<TD WIDTH="5%" ROWSPAN="2"><B>TrainNo.</B></TD>
<TD WIDTH="15%" ROWSPAN="2"><B>Name of Train</B></TD>
<TD WIDTH="15%" ROWSPAN="2"><B>Place</B></TD>
<TD WIDTH="15%" ROWSPAN="2"><B>Destination</B></TD>
<TD WIDTH="30%" ALIGN="center" COLSPAN="2"><B>Time</B></TD>
<TD WIDTH="15%" ROWSPAN="2"><B>Fare</B></TD>
</TR>
<TR>
<TD WIDTH="15%"><B>Arrival</B></TD>
<TD WIDTH="15%"><B>Departure</B></TD>
</TR>
<TR>
<TD WIDTH="5%">1029</TD>
<TD WIDTH="15%">Intercity</TD>
<TD WIDTH="15%">Mumbai</TD>
<TD WIDTH="15%">Pune</TD>
<TD WIDTH="15%">6.45</TD>
<TD WIDTH="15%">11.50</TD>
<TD WIDTH="15%">250</TD>
</TR>
<TR>
<TD WIDTH="5%">1312</TD>
<TD WIDTH="15%">Rajdhani</TD>
<TD WIDTH="15%">Delhi</TD>
<TD WIDTH="15%">Jaipur</TD>
<TD WIDTH="15%">10.15</TD>
<TD WIDTH="15%">19.00</TD>
<TD WIDTH="15%">1600</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internet explorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>…</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>…</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE> CSSimplified.com HTML 18</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY>…</BODY>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

<TABLE>

The HTML <table> tag is used for defining a table. The table tag contains other tags that define the structure of the table.

 

<TR>

The HTML <tr> tag is used for specifying a table row within a table.

 

<TD>

The HTML <td> tag is used for specifying a cell or table data within a table.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.