Skip to main content

HTML Table Tag Basics

Tables

Tables are very important to show data in the form of rows and columns. Tables make data more readable and easy to understand. A table consists of rows, columns and cells.

HTML Tags To Make A Table

As we know that there are basically three elements in a table, that is, rows, columns and cells. So, there are the following basic tags to create a table in an HTML web page:
  1. <TABLE> tag
  2. <TR> tag
  3. <TD> tag
  4. <TH> tag


 

<TABLE> Tag

<Table> tag is used to specify the start of a table. It also specifies some attributes of the table like ALIGN and BORDER attributes etc.
Example 1: <Table>                    => Table without a border.
Example 2: <Table border="1">     => Table with a border of width 1.
Example 3: <Table align="left" border="2">  => A left aligned Table with a border of width 2.

<TR> Tag

TR stands for TABLE ROW. As the name shows, <TR> tag is used to create a row in a table. A row is started by <TR> tag and is closed by </TR> tag. There are one or more <TD> or <TH> tags between <TR> and </TR> tags to create cells.

Example 1: <TR>
                <TD>1</TD>
                <TD>Ahmad</TD>
                </TR>
Output:

1 Ahmad

Example 2:
              <TR bgcolor="red">
              <TD>1</TD>
                <TD>Ahmad</TD>
               </TR>
Output
1 Ahmad


 

<TD> Tag

<TD> tag is used to create a cell. TD stands for TABLE DATA. In addition, the number of cells in a row will specify number of columns in a table. The data to be shown in a cell is placed between <TD> and </TD> tags.

Example 1: <TD>Ahmad</TD>
Example 2: <TD bgcolor="yellow">345</TD>
Example 3: <TD width="100">Nasir</TD>

<TH> Tag

<TH> tag is used to create a header row in a table. TH stands for TABLE HEADING.One <TH> tag makes one header cell. The data to be shown in header cell is placed between <TH> and </TH> tags.


Example 1: <TH> Roll No </TH>
Example 2: <TH bgcolor="yellow">Name</TH>
Example 3:
<TR>
<TH>Roll Number</TH>
<TH>Name</TH>
<Th Marks</TH>
</TR>
Output:

Roll Number Name Marks

A Complete Table Example Code and Output in Browser

HTML sample CodeOutput in web browser
<table border="4">
<tr>
<th>Roll Number</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>700</td>
</tr>
</table>

Roll Number Name Marks
1 Ahmad 700


Comments

Popular posts from this blog

Basic Structure of HTML Document

Basic Structure of HTML Document  The basic structure of an HTML document is given below: <HTML>         <HEAD>                  </HEAD>                 <BODY>                </BODY> </HTML> The above format shows that an HTML document starts with <HTML> tag and ends with </HTML> tag. It is also clear that an HTML document consists of two main sections:  Head Section Head section is used to specify a title of the web page, normally. There are some other uses of Head section too, like linking external style sheets and Java script code, etc. Head section starts with the <HEAD> tag and ends with the </HEAD> tag. <TITLE> tag is used to display a title of...

What are Different Types of Input Devices With Examples

Topic: Different types of input devices of a computer system with examples, pictures and explanation:  Topics Covered are: Definition of Input Devices Functions of Input Devices ( How input devices work? ) Examples of Input Devices Pictures / Images of different input devices Different Examples of Input Devices With Description Keybboard Mouse Trach Ball Trackpad Joy Stick Light Pen Microphone Scanner Graphic Tablet ( Digitizer ) Digital Camera Touch Screen ( I/O Device / Dual Device - Perform Both Functions input + Output ) INPUT DEVICES ( Definition ) Input devices are used to enter data and instructions into computer memory from external world. Input Device is a hardware part of the computer that is used to enter data and instructions into computer memory. The examples of input devices include: Keyboard, Mouse , Track ball, Track Pad, Joy stick, Touch Screen, Light pen,   Scanner , Digital Camera, Microphone, Graphics tablet e...

Download PANDA Cloud Antivirus Free

Panda Cloud Antivirus is a light weight Free Antivirus Software. It protects you while you browse internet, play games or work in different computer applications and you won't even notice it. Panda Cloud Antivirus provides you with the fastest protection against the newest viruses supported by cloud-scanning from PandaLabs' servers.  Check how PANDA Cloud Antivirus Free got 6th Position in Free Antivirus Competition  Title: Cloud Antivirus 2.2.0 Download Filename: CloudAntivirus.exe File size: 45.71MB Operating Systems Support: Windows XP / Windows Vista / Windows7 / Windows Vista64 / Windows7 64 / Windows8 / Windows8 64 Languages: English and Many Other Multiple languages License: Freeware Developer: Panda Security www.pandasecurity.com Homepage: ...