Scribd
Upload
3 views26 pages

HTML Tags Chart

The document is a comprehensive HTML tags chart that provides a list of various HTML tags along with their names, code examples, and browser views. It includes tags for comments, links, formatting text, creating lists, forms, tables, and more. Each entry illustrates how the tag is used and what it displays in a web browser.

Uploaded by

masayileblessing
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views26 pages

HTML Tags Chart

The document is a comprehensive HTML tags chart that provides a list of various HTML tags along with their names, code examples, and browser views. It includes tags for comments, links, formatting text, creating lists, forms, tables, and more. Each entry illustrates how the tag is used and what it displays in a web browser.

Uploaded by

masayileblessing
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Tags Chart

source: [Link]
Tag Name Code Example Browser View
<!--This can be viewed in the HTML part of a
<!-- comment Nothing will show
document-->
<A HREF="[Link]
<A - anchor Visit Our Site
Our Site</A>
<B> bold <B>Example</B> Example
<BIG> big (text) <BIG>Example</BIG> Example
body of
<BODY> <BODY>The content of your page</BODY> Contents of your webpage
document
The contents of your page<BR>The contents of The contents of your page
<BR> line break
your page The contents of your page
<CENTER>This will center your
<CENTER> center This will center your contents
contents</CENTER>
<DL> Definition Term
<DT>Definition Term Definition of the
definition
<DD>Definition of the term term
<DD> descriptio
<DT>Definition Term Definition Term
n
<DD>Definition of the term Definition of the
</DL> term
<DL>
<DT>Definition Term Definition Term
definition <DD>Definition of the term Definition of the term
<DL>
list <DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>
<DL>
<DT>Definition Term Definition Term
definition <DD>Definition of the term Definition of the term
<DT>
term <DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>
This is an <EM>Example</EM> of using This is an Example of using
<EM> emphasis
the emphasis tag the emphasis tag
embed <EMBED src="[Link]" width="100%"
<EMBED>
object height="60" align="center">

<EMBED src="[Link]" autostart="true" Music will begin playing when


embed hidden="false" loop="false"> your page is loaded and will
<EMBED>
object <noembed><bgsound src="[Link]" only play one time. A control
loop="1"></noembed> panel will be displayed to
enable your visitors to stop
the music.
<FONT FACE="Times New
<FONT> font
Roman">Example</FONT>
Example
<FONT FACE="Times New Roman"
<FONT> font
SIZE="4">Example</FONT> Example
<FONT> font
<FONT FACE="Times New Roman" SIZE="+3"
COLOR="#FF0000">Example</FONT> Example
<FORM action="[Link]
Name: <INPUT name="Name" value="" Name:
size="10"><BR>
<FORM> form Email: <INPUT name="Email" value="" Email:
size="10"><BR> Submit
<CENTER><INPUT type="submit"></CENTER>
</FORM>

<H1> heading 1 <H1>Heading 1 Example</H1>


Heading 1
Example
<H2> heading 2 <H2>Heading 2 Example</H2>
Heading 2
Example
<H3> heading 3 <H3>Heading 3 Example</H3> Heading 3 Example
<H4> heading 4 <H4>Heading 4 Example</H4> Heading 4 Example
<H5> heading 5 <H5>Heading 5 Example</H5> Heading 5 Example
<H6> heading 6 <H6>Heading 6 Example</H6> Heading 6 Example

heading
<HEAD>Contains elements describing the
<HEAD> of Nothing will show
document</HEAD>
document

horizontal Contents of your webpage


<HR> <HR>
rule
Contents of your webpage
Contents of your webpage
horizontal
<HR> <HR WIDTH="50%" SIZE="3">
rule
Contents of your webpage
Contents of your webpage
horizontal
<HR> <HR WIDTH="50%" SIZE="3" NOSHADE>
rule
Contents of your webpage
<HR> Contents of your webpage
horizontal <HR WIDTH="75%" COLOR="#FF0000"
(Internet
rule SIZE="4">
Explorer) Contents of your webpage
<HR> Contents of your webpage
horizontal <HR WIDTH="25%"
(Internet
rule COLOR="#6699FF" SIZE="6">
Explorer) Contents of your webpage
hypertext <HTML><HEAD><META><TITLE>Title of your
<HTML> markup webpage</TITLE></HEAD><BODY>Webpage Contents of your webpage
language contents</BODY></HTML>
<I> italic <I>Example</I> Example
<IMG SRC="[Link]" WIDTH="41"
<IMG> image HEIGHT="41" BORDER="0" ALT="a sentence
about your site">
Example 1:
Example 1:
<FORM METHOD=post ACTION="/cgi-
<INPUT> input field bin/[Link]">
Submit
<INPUT type="text" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 2:

<FORM METHOD=post ACTION="/cgi- Example 2:


<INPUT> bin/[Link]">
(Internet input field <INPUT type="text" STYLE="color: #FFFFFF;
Explorer) font-family: Verdana; font-weight: bold; font-size: Submit
12px; background-color: #72A4D2;" size="10"
maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 3:
Example 3:
<FORM METHOD=post ACTION="/cgi-
bin/[Link]">
<TABLE BORDER="0" CELLSPACING="0"
<INPUT> input field CELLPADDING="2"><TR><TD
BGCOLOR="#8463FF"><INPUT type="text"
size="10" MAXLENGTH="30"></TD><TD
BGCOLOR="#8463FF" VALIGN="Middle">
<INPUT type="image" name="submit"
src="[Link]"></TD></TR> </TABLE>
</FORM>
Example 4: Example 4:

<FORM METHOD=post ACTION="/cgi-


bin/[Link]">
Enter Your Comments:<BR>
<INPUT> input field <TEXTAREA wrap="virtual" name="Comments"
rows=3 cols=20
MAXLENGTH=100></TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit"> Submit Clear
<INPUT type="Reset" VALUE="Clear">
</FORM>
Example 5:

<FORM METHOD=post ACTION="/cgi- Example 5:


bin/[Link]">
<CENTER> Select an
Select an option: option 2
<INPUT> input field <SELECT> option:
<OPTION >option 1 Submit
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit"
VALUE="Submit"></CENTER>
</FORM>
Example 6:
Example 6:
<FORM METHOD=post ACTION="/cgi-
Select an option:
bin/[Link]">
Select an option:<BR> Option 1
<INPUT type="radio" name="option"> Option 1
<INPUT type="radio" name="option" Option 2
CHECKED> Option 2
<INPUT type="radio" name="option"> Option 3 Option 3
<INPUT> input field <BR>
<BR> Select an option:
Select an option:<BR>
<INPUT type="checkbox" name="selection"> Selection 1
Selection 1
<INPUT type="checkbox" name="selection" Selection 2
CHECKED> Selection 2
<INPUT type="checkbox" Selection 3
name="selection"> Selection 3 Submit
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 1:
Example 1:
 List item 1
<MENU>
<LI type="disc">List item 1 o List item 2
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>  List item 3

<LI> list item


Example 2:
Example 2:
<OL type="i">
<LI>List item 1 i. List item 1
<LI>List item 2 ii. List item 2
<LI>List item 3
<LI>List item 4
iii. List item 3
</OL> iv. List item 4

Visit our <A


<LINK> link HREF="[Link] Visit our site
A>

<MARQUEE <MARQUEE bgcolor="#CCCCCC" loop="-1"


> scrolling
scrollamount="2" width="100%">Example
(Internet text
Explorer) Marquee</MARQUEE>

<MENU>  List item 1


<MENU> menu
<LI type="disc">List item 1
<LI type="circle">List item 2 o List item 2
<LI type="square">List item 3
</MENU>  List item 3

<META name="Description"
content="Description of your site">
<META> meta Nothing will show
<META name="keywords" content="keywords
describing your site">
<META HTTP-EQUIV="Refresh"
<META> meta CONTENT="4;URL=[Link] Nothing will show
/">
<META http-equiv="Pragma" content="no-
<META> meta Nothing will show
cache">
<META> meta <META name="rating" content="General"> Nothing will show
<META> meta <META name="ROBOTS" content="ALL"> Nothing will show
<META NAME="ROBOTS"
<META> meta Nothing will show
content="NOINDEX,FOLLOW">
Example 1:
Example 1:
<OL>
<LI>List item 1 1. List item 1
<LI>List item 2 2. List item 2
<LI>List item 3 3. List item 3
<LI>List item 4 4. List item 4
</OL>
ordered
<OL>
list Example 2:
Example 2:

<OL type="a">
a. List item 1
<LI>List item 1 b. List item 2
<LI>List item 2 c. List item 3
<LI>List item 3 d. List item 4
<LI>List item 4
</OL>
<FORM METHOD=post ACTION="/cgi-
bin/[Link]">
<CENTER>
Select an option:
<SELECT>
<OPTION>option 1 Select an option:
listbox <OPTION SELECTED>option 2
<OPTION> option 2
option <OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>
This is an example displaying the use of the This is an example displaying
<P> paragraph paragraph tag. <P> This will create a line break the use of the paragraph tag.
and a space between lines.
This will create a line break
Attributes: and a space between lines.

Example 1:<BR> Attributes:


<BR>
<P align="left"> Example 1:
This is an example<BR>
displaying the use<BR> This is an example
of the paragraph tag.<BR> displaying the use
<BR> of the paragraph tag.
Example 2:<BR>
<BR>
<P align="right"> Example 2:
This is an example<BR>
displaying the use<BR> This is an example
of the paragraph tag.<BR> displaying the use
<BR> of the paragraph tag.
Example 3:<BR>
<BR> Example 3:
<P align="center">
This is an example<BR> This is an example
displaying the use<BR> displaying the use
of the paragraph tag. of the paragraph tag.
small
<SMALL> <SMALL>Example</SMALL> Example
(text)
strong
<STRONG>
emphasis
<STRONG>Example</STRONG> Example
Example 1:

<TABLE BORDER="4"
CELLPADDING="2" CELLSPACING="2"
WIDTH="100%"> Example 1:
<TR>
<TD>Column 1</TD> Column 1 Column 2
<TD>Column 2</TD>
</TR>
</TABLE>
Example 2:
Example 2: (Internet Explorer)
Column 1 Column 2
<TABLE> table <TABLE BORDER="2"
BORDERCOLOR="#336699"
CELLPADDING="2" CELLSPACING="2"
WIDTH="100%"> Example 3:
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD> Column 1 Column 2
</TR> Row 2 Row 2
</TABLE>

Example 3:

<TABLE CELLPADDING="2"
CELLSPACING="2" WIDTH="100%">
<TR>
<TD BGCOLOR="#CCCCCC">Column 1</TD>
<TD BGCOLOR="#CCCCCC">Column 2</TD>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
</TABLE>
<TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%">
<TR>
<TD> table data <TD>Column 1</TD> Column 1 Column 2
<TD>Column 2</TD>
</TR>
</TABLE>
<DIV align="center"><TABLE>
<TR>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD> Column Column Column
<TD>Row 2</TD> 1 2 3
</TR> Row 2 Row 2 Row 2
table
<TH> <TR>
header Row 3 Row 3 Row 3
<TD>Row 3</TD>
<TD>Row 3</TD> Row 4 Row 4 Row 4
<TD>Row 3</TD>
</TR>
<TR>
<TD>Row 4</TD>
<TD>Row 4</TD>
<TD>Row 4</TD>
</TR>
</TABLE>
</DIV>
document Title of your webpage will be
<TITLE> <TITLE>Title of your webpage</TITLE>
title viewable in the title bar.
<TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%">
<TR> Column 1 Column 2
<TR> table row <TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>
<TT> teletype <TT>Example</TT> Example
<U> underline <U>Example</U> Example
Example 1:<BR>
unordered Example 1:
<UL> <BR>
list
<UL>
<LI>List item 1  List item 1
<LI>List item 2  List item 2
</UL>
<BR>
Example 2:<BR>
<UL type="disc"> Example 2:
<LI>List item 1
<LI>List item 2  List item 1
<UL type="circle">  List item 2
<LI>List item 3 o List item 3
<LI>List item 4 o List item 4
</UL>
</UL>

HTML Form Syntax


1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags


Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.


<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags


Let's see the list of HTML 5 form tags.

Tag Description

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML <form> element


The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text area,
password field, etc.

Note: The <form> element does not itself create a form but it is container to contain all required form
elements, such as <input>, <label>, etc.

Syntax:

1. <form>
2. //Form elements
3. </form>

HTML <input> element


The HTML <input> element is fundamental form element. It is used to create form fields, to take
input from user. We can apply different input filed to gather different information form user.
Following is the example to show the simple text input.

ADVERTISEMENT

Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>

Output:

ADVERTISEMENT

HTML TextField Control


The type="text" attribute of input tag creates textfield control also known as single line textfield
control. The name attribute is optional, but it is required for the server side component such as
JSP, ASP, PHP etc.

1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Output:

Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.

HTML <textarea> tag in form


The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea>
can be specify either using "rows" or "cols" attribute or by CSS.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>

Output:

Label Tag in Form


It is considered better to have label in form. As it makes the code parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for
attribute in label tag that must be same as id attribute of input tag.

NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it will
provide a focus when you tap or click on label tag. It is more worthy with touchscreens.

1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>

Output:

HTML Password Field Control


The password is not visible to the user in password field control.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>

Output:

HTML 5 Email Field Control


The email field in new in HTML 5. It validates the text for correct email address. You must use @
and . in this field.

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

It will display in browser like below:

Note: If we will not enter the correct email, it will display error like:

Radio Button Control


ADVERTISEMENT
ADVERTISEMENT

The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.
1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
5. </form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>

Note: These are similar to radio button except it can choose multiple options at a time and radio button
can select one button at a time, and its display.

Output:

Submit button control


HTML <input type="submit"> are used to add a submit button on web page. When user clicks
on submit button, then form get submit to the server.

Syntax:

1. <input type="submit" value="submit">

The type = submit , specifying that it is a submit button


The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>

Output:

HTML <fieldset> element:


The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

ADVERTISEMENT

Example:

1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. lt;/form>

Output:
HTML Form Example
Following is the example for a simple form of registration.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br>
21. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="others"/>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
Test it Now
Output:

HTML Form Example


Let's see a simple example of creating HTML form.

1. <form action="#">
2. <table>
3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
5. <td><input type="text" name="name" value="" id="register_name" style="width:160px"/><
/td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">Enter password:</label>
</td>
9. <td><input type="password" name="password" id="register_password" style="width:160px
"/></td>
10. </tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
13. <td
14. ><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>

15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td
>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" value="male"/>
20. <label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></t
d>
27. <td><select name="country" id="register_country" style="width:160px">
28. <option value="india">india</option>
29. <option value="pakistan">pakistan</option>
30. <option value="africa">africa</option>
31. <option value="china">china</option>
32. <option value="other">other</option>
33. </select>
34. </td>
35. </tr>
36. <tr>
37. <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"
/>
38. </div></td>
39. </tr>
40. </table>
41. </form>

1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

Uses for Tables in HTML

 To present rows and columns of data (example)


 To position text precisely (example)
 To more predictably arrange images, text, and other objects (example)
 To force a certain layout to the web page allowing for for headings, navigational
menus, advertisements, etc. (example)
 To mix searchable text within images to give search engines more data (example)

Now, let's figure out how to do this.

Parts of a Table

The table below is a generic table with its parts labeled.

HTML Tags of a Table

The rest of this document contains a summary of the most common table tags and attributes.

The table itself must be defined using the table tags <table> and </table>. All of the items and
attributes contained within that table must appear between these two tags.

A title or caption may be defined for the table by placing the <CAPTION>...</CAPTION> tag
immediately after the <table> tag.

The next layer down is to define the rows. A table's row is defined with the tags <tr> and </tr>. All
of the items and attributes contained within that row of the table must appear between these two tags.

The lowest level of the table is the table data. Each item of the table is defined between the tags
<td> and </td>. You may place just about any page component within the table data tags, even
another table.

The HTML for a basic table is shown below.

<table border="1">
<caption>Table Caption</caption>
<tr>
<td>
Row 1, col 1 item
</td>
<td>
Row 1, col 2 item
</td>
<td>
Row 1, col 3 item
</td>
</tr>
<tr>
<td>
Row 2, col 1 item
</td>
<td>
Row 2, col 2 item
</td>
<td>
Row 2, col 3 item
</td>
</tr>
</table>

The resulting table is shown below.

Table Caption

Row 1, col 1 item Row 1, col 2 item Row 1, col 3 item

Row 2, col 1 item Row 2, col 2 item Row 2, col 3 item

Note that I had to add the "border=1" attribute to define the cells of the table with lines.

Table Attributes

The following is a brief list of the attributes definable for a table. All of these attributes must be
contained between the keyword "table" and the greater than bracket of the <table> tag.

Borders

The border around the outside of the table can be edited by width and color. To change the width of
the table's border, use the attribute border="p" where p = number of pixels wide the border should
be. Note that using this attribute also adds borders to the cells.

The table below has a border of 10 pixels. This is done with the table tag <table border="10">.

Item 1 Item 2

Item 3 Item 4

To have no border, set border="0".

Item 1 Item 2

Item 3 Item 4

Colors and Backgrounds


To change the border's color, use the attribute bordercolor="color" where color is the same
format as all the other web colors we've been using. The table below has the bordercolor set to #ff00ff
with the table tag <table bordercolor="#ff00ff">.

Item 1 Item 2

Item 3 Item 4

To change the background color, use the attribute bgcolor="color". The table below has its
background color set to #00ff00 with a table tag of <table bgcolor="#00ff00">.

Item 1 Item 2

Item 3 Item 4

To set a tiled background for a table, use the background="URL", where filename is the name of
the tiled graphic to be used. For example, in the same directory where these notes are found is a
graphics file [Link]. The table below uses it as a background by using the table tag <table
background="[Link]">

Item 1 Item 2

Item 3 Item 4

Cell Spacing

The spacing between the cells can be increased with the cellspacing="p" attribute where p equals
the number of pixels to put between cells. The example below obtains a cell spacing of 10 pixels with
the table tag <table cellspacing="10">

Item 1 Item 2

Item 3 Item 4

Cell Padding

The spacing around an item within each cell can be increased with the cellpadding="p" attribute
where p equals the number of pixels to put between the item and the end of the cell. The example
below obtains a cell padding of 10 pixels with the table tag <table cellpadding="10">.
Item 1 Item 2

Item 3 Item 4

Table Alignment

You can also specify how the table is placed horizontally within the browser's window
Item 1 Item 2
using the align attribute. Its format is align="alignment" where alignment
equals left, center, or right. If you set the alignment to left or right, text flows around
the table as it does with the table to the right of this paragraph. Center, however, Item 3 Item 4
does not allow text to flow around it resulting in a simple centered table as shown
below.

Item 1 Item 2

Item 3 Item 4

Table Width

Just like horizontal rules, a table's width can be defined in terms of a percentage of the overall
browser window width or as a specific number of pixels. The first table uses WIDTH="50%" to define
its width as 50% of the width of the window. (The resulting table will depend on the width of your
browser window.)

Item 1 Item 2

Item 3 Item 4

The next table is defined as 50 pixels wide using the attribute WIDTH="50".

Item Item
1 2

Item Item
3 4

Table Data Attributes


The following is a brief list of the attributes definable for a single cell of the table, i.e., a single piece of
table data. All of these attributes must be contained between the keyword "td" and the greater than
bracket of the <td> tag.

The table data uses the next three attributes in the same way that the table tag uses them.

 To change the background color of a single cell, use the attribute bgcolor="color" inside
the <td> tag.
 To add a tiled background image to a single cell, use the
attribute background="URL" inside the <td> tag.
 To set the width of a single cell, use the attribute width="w" where w is either a
percentage of the table's width (e.g., "25%") or a fixed number of pixels (e.g., "25").

The cell, however, adds a few additional attributes. First, it allows the user to define the verticle and
horizontal alignment of an item within a cell. The diagram below shows the different attributes for
horizontal and vertical alignment within a cell.

Lastly, you may force a cell of a table to span more than one column or row using the attribute
COLSPAN="n" or ROWSPAN="n" where n=the number of columns or rows to span.

This table data spans the first two columns. (COLSPAN="2")

This table data spans the last two columns.


(COLSPAN="2")

This table data spans the first two


rows. (ROWSPAN="2")

Embedding Tables

As stated earlier, just about any component of a web page may be inserted into a table as table data.
Below is an example of inserting a table within a table.
Each of
these are Each of these
single are single table
table items.
items.

The items below


(1, 2, 3, etc.)
are contained
Each of within a "sub
these are table."
single
table 1 2 3
items.
4 5 6

7 8 9

You embed a table just by placing another table within the <td> and </td> tags.

HTML Table Borders


❮ PreviousNext ❯

HTML tables can have borders of different styles and shapes.

How To Add a Border


To add a border, use the CSS border property on table, th, and td elements:

Example
table, th, td {
border: 1px solid black;
}
Try it Yourself »
Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse.

This will make the borders collapse into a single border:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Try it Yourself »

Style Table Borders


If you set a background color of each cell, and give the border a white color (the same as
the document background), you get the impression of an invisible border:

Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Try it Yourself »

Round Table Borders


With the border-radius property, the borders get rounded corners:

Example
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Try it Yourself »

Skip the border around the table by leaving out table from the css selector:

Example
th, td {
border: 1px solid black;
border-radius: 10px;
}
Try it Yourself »

Dotted Table Borders


With the border-style property, you can set the appearance of the border.

The following values are allowed:

 dotted
 dashed
 solid
 double
 groove
 ridge
 inset
 outset
 none
 hidden

Example
th, td {
border-style: dotted;
}
Try it Yourself »

Border Color
With the border-color property, you can set the color of the border.

Example
th, td {
border-color: #96D4D4;
}
Try it Yourself »

You might also like