HTML TABLE

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page .

---

HTML Table Tags

Tag	Description
<table>	It defines a table.
<tr>	It defines a row in a table.
<th>	It defines a header cell in a table.
<td>	It defines a cell in a table.
<caption>	It defines the table caption.
<colgroup>	It specifies a group of one or more columns in a table for formatting.
<col>	It is used with <colgroup> element to specify column properties for each column.
<tbody>	It is used to group the body content in a table.
<thead>	It is used to group the header content in a table.
<tfooter>	It is used to group the footer content in a table.

---

HTML Table Example

Let's see the example of HTML table tag. It output is shown above.

1. <table>  
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>  

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML
2. By border property in CSS

---

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is not recommended now.

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>  

2) CSS Border property

It is now recommended to use border property of CSS to specify border in table.

1. <style>  
2. table, th, td {  
3.     border: 1px solid black;  
4. }  
5. </style>  

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML
2. By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS. So let's see the code of CSS.

1. <style>  
2. table, th, td {  
3.     border: 1px solid pink;  
4.     border-collapse: collapse;  
5. }  
6. th, td {  
7.     padding: 10px;  
8. }  
9. </style>  

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

---

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

1. <ol>  
2.  <li>Aries</li>  
3.  <li>Bingo</li>  
4.  <li>Leo</li>  
5.  <li>Oracle</li>  
6. </ol>  

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

1. <dl>  
2.   <dt>Aries</dt>  
3.   <dd>-One of the 12 horoscope sign.</dd>  
4.   <dt>Bingo</dt>  
5.   <dd>-One of my evening snacks</dd>  
6.  <dt>Leo</dt>  
7.  <dd>-It is also an one of the 12 horoscope sign.</dd>  
8.   <dt>Oracle</dt>  
9.   <dd>-It is a multinational technology corporation.</dd>   
10. </dl>  

HTML PARAGRAPH

HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph.

See this example:

1. <p>This is first paragraph.</p>  
2. <p>This is second paragraph.</p>  
3. <p>This is third paragraph.</p>

Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one.

1. <p>  
2. I am  
3. going to provide  
4. you a tutorial on HTML  
5. and hope that it will  
6. be very beneficial for you.  
7. </p>  
8. <p>  
9. Look, I put here a lot  
10. of spaces                    but            I know, Browser will ignore it.  
11. </p>  
12. <p>  
13. You cannot determine the display of HTML</p>  
14. <p>because resized windows may create different result.  
15. </p>  

HTML Anchor

The HTML anchor tag defines a hyperlink that links one page to another page. The "href" attribute is the most important attribute of the HTML a tag.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Let's see an example of HTML anchor tag.

1. <a href="second.html">Click for Second Page</a>

HTML Image

HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

1. <h2>HTML Image Example</h2>  
2. <img src="good_morning.jpg" alt="Good Morning Friends"/> 

Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below.

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.

4) height

It specifies the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.