Scribd
Upload
2 views

HTML Notes

The document provides an overview of HTML tables, including the use of the <table>, <tr>, <th>, and <td> tags to create structured data presentations. It explains the importance of attributes like border, bgcolor, and the use of the <img> tag for displaying images, along with the alt attribute for accessibility. Additionally, it discusses background color options for HTML pages using the bgcolor attribute.

Uploaded by

suryakarthik890890890
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Notes

The document provides an overview of HTML tables, including the use of the <table>, <tr>, <th>, and <td> tags to create structured data presentations. It explains the importance of attributes like border, bgcolor, and the use of the <img> tag for displaying images, along with the alt attribute for accessibility. Additionally, it discusses background color options for HTML pages using the bgcolor attribute.

Uploaded by

suryakarthik890890890
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Web Technologies Unit-I

HTML 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). td stands for "table data," and holds the content of a data cell. A <td> tag can contain
text, links, images, lists, forms, other tables, etc.

Table Example

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes
this can be useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

CSE -6-
Web Technologies Unit-I

HTML Table Headers

Header information in a table are defined with the <th> tag. All major browsers display the text
in the <th> element as bold and centered.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in your browser:

Header 1 Header 2

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML Table Tags


Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

CSE -7-
Web Technologies Unit-I

HTML <table> Tag


Definition and Usage
The <table> tag defines an HTML table. An HTML table consists of the <table> element and
one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th>
element defines a table header, and the <td> element defines a table cell. A more complex
HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody>
elements.
Attributes
Attribute Value Description
align left Not supported in HTML5. Deprecated in HTML
center 4.01.Specifies the alignment of a table according to
right surrounding text
bgcolor rgb(x,x,x) Not supported in HTML5. Deprecated in HTML
#xxxxxx 4.01.Specifies the background color for a table
colorname
border “1” Specifies whether the table cells should have borders or
not
Cellpadding pixels Not supported in HTML5. Specifies the space between the
cell wall and the cell content
Cellspacing pixels Not supported in HTML5. Specifies the space between cells
frame void Not supported in HTML5. Specifies which parts of the
above outside borders that should be visible
below
hsides
lhs
rhs
vsides
box
border
rules none Not supported in HTML5. Specifies which parts of the inside
groups borders that should be visible
rows
cols
all
summary text Not supported in HTML5. Specifies a summary of the
content of a table
width pixels Not supported in HTML5. Specifies the width of a table
%

Example
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>

CSE -8-
Web Technologies Unit-I
<td>January</td>
<td>$100</td>
</tr>
</table>
HTML IMAGES
With HTML you can display images in a document.

The Image Tag and the src Attribute

In HTML, images are defined with the <img> tag. To display an image on a page, you
need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of
the image you want to display on your page.
The syntax of defining an image: <img src="url">

The URL points to the location where the image is stored. An image named "boat.gif"
located in the directory "images" on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag
occurs in the document. If you put an image tag between two paragraphs, the browser shows the
first paragraph, then the image, and then the second paragraph.

The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is
an author-defined text:

<img src="images/logo.jpg” alt="Google logo">


The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load
images. The browser will then display the alternate text instead of the image. It is a good practice
to include the "alt" attribute for each image on a page, to improve the display and usefulness of
your document for people who have text-only browsers.

HTML BACKGROUNDS
A good background can make a Web site look really great.
Backgrounds

The <body> tag has two attributes where you can specify backgrounds. The background can be a
color or an image.

1. Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute
can be a hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

CSE -9-

You might also like