Vyoms OneStopTesting.com - Testing EBooks, Tutorials, Articles, Jobs, Training Institutes etc.
OneStopGate.com - Gate EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopMBA.com - MBA EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopIAS.com - IAS EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopSAP.com - SAP EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopGRE.com - of GRE EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
Bookmark and Share Rss Feeds

Table tags in HTML | Articles | Recent Articles | News Article | Interesting Articles | Technology Articles | Articles On Education | Articles On Corporate | Company Articles | College Articles | Articles on Recession
Sponsored Ads
Hot Jobs
Fresher Jobs
Experienced Jobs
Government Jobs
Walkin Jobs
Placement Section
Company Profiles
Interview Questions
Placement Papers
Resources @ VYOMS
Companies In India
Consultants In India
Colleges In India
Exams In India
Latest Results
Notifications In India
Call Centers In India
Training Institutes In India
Job Communities In India
Courses In India
Jobs by Keyskills
Jobs by Functional Areas
Learn @ VYOMS
GATE Preparation
GRE Preparation
GMAT Preparation
IAS Preparation
SAP Preparation
Testing Preparation
MBA Preparation
News @ VYOMS
Freshers News
Job Articles
Latest News
India News Network
Interview Ebook
Get 30,000+ Interview Questions & Answers in an eBook.
Interview Success Kit - Get Success in Job Interviews
  • 30,000+ Interview Questions
  • Most Questions Answered
  • 5 FREE Bonuses
  • Free Upgrades

VYOMS TOP EMPLOYERS

Wipro Technologies
Tata Consultancy Services
Accenture
IBM
Satyam
Genpact
Cognizant Technologies

Home » Articles » Table tags in HTML

Table tags in HTML







Article Posted On Date : Thursday, March 22, 2012


Table tags in HTML
Advertisements

In this article you will learn that tables have many uses in HTML. The most obvious is a table of data, but tables can also be used to place graphics on a page at just the right spot or to format text and form input boxes, or simulate columns.

Table format is widely used in webpage designing and provide you with greater control over displaying of information on web page. They allow you to create boundaries that make positioning easier.

Tables

<table> </table>

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Row Tag

Each table has at least one row and within that row are columns or what is also referred to as cells.

<tr>...</tr>

You can have N number of rows in your table.

Table Heading Tag

A table can have heading. Headings in a table are defined with the help of <th> tag.

<th>...</th>

Column/Cell tag

You have columns in your table where you can have your text, image etc.

<td>...</td>

HTML coding to create a simple table:

<html>
<head>
    <title>Tables in HTML</title>
</head>
<body>
    <h1>
        How to create table in HTML</h1>
    <table>
        <tr>
            <th>
                Names
            </th>
            <th>
                Designation
            </th>
            <th>
                Salary
            </th>
        </tr>
        <tr>
            <td>
                Rocky
            </td>
            <td>
                Assistant
            </td>
            <td>
                $2300
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Peter
            </td>
            <td>
                Manager
            </td>
            <td>
                $5700
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Samantha
            </td>
            <td>
                Teacher
            </td>
            <td>
                $7600
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Catherine
            </td>
            <td>
                President
            </td>
            <td>
                $4500
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Michael
            </td>
            <td>
                Author
            </td>
            <td>
                $3700
            </td>
        </tr>
    </table>
</body>
</html>

Adding Table Borders

You can create border for the table. You have include border attribute in the opening table tag. You can also add color attribute to the border. So in the above table the code would be adjusted accordingly:

<html>
<head>
    <title>Tables in HTML</title>
</head>
<body>
    <h1>
        How to create table in HTML</h1>
<table border="2" bordercolor="blue">
        <tr>
            <th>
                Names
            </th>
            <th>
                Designation
            </th>
            <th>
                Salary
            </th>
        </tr>
        <tr>
            <td>
                Rocky
            </td>
            <td>
                Assistant
            </td>
            <td>
                $2300
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Peter
            </td>
            <td>
                Manager
            </td>
            <td>
                $5700
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Samantha
            </td>
            <td>
                Teacher
            </td>
            <td>
                $7600
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Catherine
            </td>
            <td>
                President
            </td>
            <td>
                $4500
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Michael
            </td>
            <td>
                Author
            </td>
            <td>
                $3700
            </td>
        </tr>
    </table>
</body>
</html>

Adjusting Table Cell Spacing and Cell Padding

You can increase the space within the table cells and the space between the cells by using the cell padding and cell spacing attributes.

The cell spacing attribute adjusts the space between the cells and cell padding adjusts the space within (around) the cell.

<table border="2" bordercolor="red" cellspacing="5" cellpadding="5">

Implement this line code into your previous code and see the change:
<html>
<head>
    <title>Tables in HTML</title>
</head>
<body>
    <h1>
        How to create table in HTML</h1>
<table border="2" bordercolor="red" cellspacing="5" cellpadding="5">
        <tr>
            <th>
                Names
            </th>
            <th>
                Designation
            </th>
            <th>
                Salary
            </th>
        </tr>
        <tr>
            <td>
                Rocky
            </td>
            <td>
                Assistant
            </td>
            <td>
                $2300
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Peter
            </td>
            <td>
                Manager
            </td>
            <td>
                $5700
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Samantha
            </td>
            <td>
                Teacher
            </td>
            <td>
                $7600
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Catherine
            </td>
            <td>
                President
            </td>
            <td>
                $4500
            </td>
        </tr>
        </tr>
        <tr>
            <td>
                Michael
            </td>
            <td>
                Author
            </td>
            <td>
                $3700
            </td>
        </tr>
    </table>
</body>
</html>

Specifying a Table Width

You can specify the width of a table by using either a percentage or a pixel width.

<table width="100%" border="2" bordercolor="red" cellspacing="5" cellpadding="5">

When you set the width of the table as 100% it will take the entire screen space and the columns will be adjusted evenly. Use the previous code and make the changes and see the output.

Specifying a Table Height

You can also set the table height by adding the height tag to the table code.

<table width="100%" height="500" border="2" bordercolor="red" cellspacing="5" cellpadding="5">

You can specify the table width and height in percentage of pixel. Mostly people prefer percentage because it will adjust accordingly irrespective of the monitor size.

Setting Column Widths

It is not always necessary that you would want all the columns of same size. You can change the column width of individual column.

<td width="30%">Rocky</td> <td width="50%">Assistant</td> <td width="20%">$2300</td>
Add the above code in one row and see the output changes. You can specify the width either in percentage or pixel.


Column/cell tag and its attributes

You can also use other attributes in the column/cell tag, such as:

align: sets your text or image to left, center or right

valign: sets your content vertically to top, center or bottom

rowspan: expands over multiple rows

colspan: expands across multiple columns/cells

Align attribute

Leaving your text or image to the left of your column is usually pretty boring, so the align attribute lets you center things, using "center" or place them to the right, using "right".

<th align="center">Names</th> <th align="right">Designation</th> <th align="left">Salary</th>
In the above code I have include all three horizontal alignment left, right and center. By default the alignment is left.

Valign attribute

When placing copy in a column, the browser will automatically place it in the center of the column. You can change this default by using the valign
 attributes of "top", "center" or "bottom".

<td valign="top">Rocky</td> <td valign="bottom">Assistant</td> <td valign="center">$2300</td>
In the above code I have include all three vertical alignment top, bottom and center. By default the vertical alignment is center.

Row Span

rowspan is used to expands over multiple rows

<td rowspan="2" width="30%" valign="top">Rocky</td> <td width="50%" valign="bottom">Assitant</td> <td width="20%" align="center">$2300</td>
Column Span
colspan expands across multiple columns/cells

<td colspan="2">Michael</td> <td>Author</td> <td>$3700</td>






Sponsored Ads


Interview Questions
HR Interview Questions
Testing Interview Questions
SAP Interview Questions
Business Intelligence Interview Questions
Call Center Interview Questions
Databases
Clipper Interview Questions
DBA Interview Questions
Firebird Interview Questions
Hierarchical Interview Questions
Informix Interview Questions
Microsoft Access Interview Questions
MS SqlServer Interview Questions
MYSQL Interview Questions
Network Interview Questions
Object Relational Interview Questions
PL/SQL Interview Questions
PostgreSQL Interview Questions
Progress Interview Questions
Relational Interview Questions
SQL Interview Questions
SQL Server Interview Questions
Stored Procedures Interview Questions
Sybase Interview Questions
Teradata Interview Questions
Microsof Technologies
.Net Database Interview Questions
.Net Deployement Interview Questions
ADO.NET Interview Questions
ADO.NET 2.0 Interview Questions
Architecture Interview Questions
ASP Interview Questions
ASP.NET Interview Questions
ASP.NET 2.0 Interview Questions
C# Interview Questions
Csharp Interview Questions
DataGrid Interview Questions
DotNet Interview Questions
Microsoft Basics Interview Questions
Microsoft.NET Interview Questions
Microsoft.NET 2.0 Interview Questions
Share Point Interview Questions
Silverlight Interview Questions
VB.NET Interview Questions
VC++ Interview Questions
Visual Basic Interview Questions
Java / J2EE
Applet Interview Questions
Core Java Interview Questions
Eclipse Interview Questions
EJB Interview Questions
Hibernate Interview Questions
J2ME Interview Questions
J2SE Interview Questions
Java Interview Questions
Java Beans Interview Questions
Java Patterns Interview Questions
Java Security Interview Questions
Java Swing Interview Questions
JBOSS Interview Questions
JDBC Interview Questions
JMS Interview Questions
JSF Interview Questions
JSP Interview Questions
RMI Interview Questions
Servlet Interview Questions
Socket Programming Interview Questions
Springs Interview Questions
Struts Interview Questions
Web Sphere Interview Questions
Programming Languages
C Interview Questions
C++ Interview Questions
CGI Interview Questions
Delphi Interview Questions
Fortran Interview Questions
ILU Interview Questions
LISP Interview Questions
Pascal Interview Questions
Perl Interview Questions
PHP Interview Questions
Ruby Interview Questions
Signature Interview Questions
UML Interview Questions
VBA Interview Questions
Windows Interview Questions
Mainframe Interview Questions

Copyright © 2001-2024 Vyoms.com. All Rights Reserved. Home | About Us | Advertise With Vyoms.com | Jobs | Contact Us | Feedback | Link to Us | Privacy Policy | Terms & Conditions
Placement Papers | Get Your Free Website | IAS Preparation | C++ Interview Questions | C Interview Questions | Report a Bug | Romantic Shayari | CAT 2024
Fresher Jobs | Experienced Jobs | Government Jobs | Walkin Jobs | Company Profiles | Interview Questions | Placement Papers | Companies In India | Consultants In India | Colleges In India | Exams In India | Latest Results | Notifications In India | Call Centers In India | Training Institutes In India | Job Communities In India | Courses In India | Jobs by Keyskills | Jobs by Functional Areas

Testing Articles | Testing Books | Testing Certifications | Testing FAQs | Testing Downloads | Testing Interview Questions | Testing Jobs | Testing Training Institutes

Gate Articles | Gate Books | Gate Colleges | Gate Downloads | Gate Faqs | Gate Jobs | Gate News | Gate Sample Papers | Gate Training Institutes

MBA Articles | MBA Books | MBA Case Studies | MBA Business Schools | MBA Current Affairs | MBA Downloads | MBA Events | MBA Notifications | MBA FAQs | MBA Jobs
MBA Job Consultants | MBA News | MBA Results | MBA Courses | MBA Sample Papers | MBA Interview Questions | MBA Training Institutes

GRE Articles | GRE Books | GRE Colleges | GRE Downloads | GRE Events | GRE FAQs | GRE News | GRE Training Institutes | GRE Sample Papers

IAS Articles | IAS Books | IAS Current Affairs | IAS Downloads | IAS Events | IAS FAQs | IAS News | IAS Notifications | IAS UPSC Jobs | IAS Previous Question Papers
IAS Results | IAS Sample Papers | IAS Interview Questions | IAS Training Institutes | IAS Toppers Interview

SAP Articles | SAP Books | SAP Certifications | SAP Companies | SAP Study Materials | SAP Events | SAP FAQs | SAP Jobs | SAP Job Consultants
SAP Links | SAP News | SAP Sample Papers | SAP Interview Questions | SAP Training Institutes |
Copyright ©2001-2024 Vyoms.com, All Rights Reserved.
Disclaimer: VYOMS.com has taken all reasonable steps to ensure that information on this site is authentic. Applicants are advised to research bonafides of advertisers independently. VYOMS.com shall not have any responsibility in this regard.