html text area

HTML Textarea

The HTML <textarea> tag is used to define a multi-line text input control.

It can hold unlimited number of characters and the texts are displayed in a fixed-width font (usually courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also be defined through CSS height and width properties.


HTML Textarea Example

  1. <textarea rows=“9” cols=“70”>  
  2. JavaTpoint textarea tag example with rows and columns.  
  3. </textarea>  

Test it Now

Output:


Supporting Browsers

Element chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<textarea> Yes Yes Yes Yes Yes

New HTML 5 Textarea Attributes

Attribute Description
autofocus It specifies that a text area should be automatically get focused when the page is loaded.
form It specifies one or more forms the textarea belongs to.
maxlength It specifies the maximum number of characters allowed in the text area.
placeholder It specifies a short hint that describes the expected value of a textarea.
required It specifies that textarea must be filled out.
wrap It specifies that how the texts in the textarea are wrapped at the time of the submission of the form.

HTML Textarea form attribute

The form attribute specifies one or more forms the text area belongs to.

  1. <form action=“updates.jsp” id=“usrform”>  
  2.  Name: <input type=“text” name=“usrname”>  
  3.  <input type=“submit”>  
  4. </form>  
  5. <br>  
  6. <textarea rows=“9” cols=“70” name=“comment” form=“usrform”>  
  7. Enter text here…</textarea>  
  8. <p>The text area above is outside the form element, but should still be a part of the form.</p>  
  9. <p><b>Note:</b> The form attribute is not supported in Internet Explorer.</p>  

Test it Now

Output:

Name:  

The textarea element above is outside the form , but it is still the part of the form.

Note: The form attribute is not supported in Internet Explorer.

Marquee HTML

Marquee HTML

The Marquee HTML tag is a non-standard HTML element which is used to scroll a image or text horizontally or vertically.

In simple words, you can say that it scrolls the image or text up, down, left or right automatically.

Marquee tag was first introduced in early versions of Microsoft’s Internet Explorer. It is compared with Netscape’s blink element.


Marquee HTML Example

  1. <marquee>This is an example of html marquee </marquee>  

Test it Now

Output:

This is an example of html marquee


Supporting Browsers

Element chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<marquee> Yes Yes Yes Yes Yes

HTML Marquee Attributes

Marquee’s element contains several attributes that are used to control and adjust the appearance of the marquee.

Attribute Description
behavior It facilitates user to set the behavior of the marquee to one of the three different types: scroll, slide and alternate.
direction defines direction for scrolling content. It may be left, right, up and down.
width defines width of marquee in pixels or %.
height defines height of marquee in pixels or %.
hspace defines horizontal space in pixels around the marquee.
vspace defines vertical space in pixels around the marquee.
scrolldelay defines scroll delay in seconds.
scrollamount defines scroll amount in number.
loop defines loop for marquee content in number.
bgcolor defines background color. It is now deprecated.

HTML Scroll Marquee

It is a by default property. It is used to scroll the text from right to left, and restarts at the right side of the marquee when it is reached to the end of left side. After the completion of loop text disappears.

  1. <marquee width=“100%” behavior=“scroll” bgcolor=“pink”>  
  2. This is an example of a scroll marquee…  
  3. </marquee>  

Test it Now

Output:

This is an example of a scroll marquee…


HTML Slide Marquee

In slide marquee, all the contents to be scrolled will slide the entire length of marquee but stops at the end to display the content permanently.

  1. <marquee width=“100%” behavior=“slide” bgcolor=“pink”>  
  2. This is an example of a slide marquee…  
  3. </marquee>  

Test it Now

Output:

This is an example of a slide marquee…


HTML Alternate Marquee

It scrolls the text from right to left and goes back left to right.

  1. <marquee width=“100%” behavior=“alternate” bgcolor=“pink”>  
  2. This is an example of a alternate marquee…  
  3. </marquee>  

Test it Now

Output:

This is an example of a alternate marquee…


Direction in HTML marquee

This is used to change the direction of scrolling text. Let’s take an example of marquee scrolling to the right. The direction can be left, right, up and down.

  1. <marquee width=“100%” direction=“right”>  
  2.  This is an example of a right direction marquee…  
  3. </marquee>  

Test it Now

Output:

This is an example of a right direction marquee…


Nested marquee example

  1. <marquee width=“400px” height=“100px” behavior=“alternate” style=“border:2px solid red”>  
  2. <marquee behavior=“alternate”>  
  3. Nested marquee…  
  4. </marquee>  
  5. </marquee>  

Test it Now 

Nested marquee…


Disadvantages HTML marquee

1) Marquee may be distracting because human eyes are attracted towards movement and marquee text constantly.

2) Since Marquee text moves, so it is more difficult to click static text, depending on the scrolling speed.

3) It is a non-standard HTML element.

4) It draws user’s attention needlessly and makes the text harder to read.

html form list

HTML Form

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing.


Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.


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 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>  

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.

  1. <form>  
  2.     <label for=“firstname”>First Name: </label>  
  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>  

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>  

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>  

Radio Button Control

The radio button is used to select one from multiple options. It is used in gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected 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>  
  5.               <input type=“checkbox” id=“football” name=“football” value=“football”/>  
  6.                  <label for=“football”>Football</label>  
  7.               <input type=“checkbox” id=“hockey” name=“hockey” value=“hockey”/>  
  8.                  <label for=“hockey”>Hockey</label>  
  9. </form>  

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></td>  
  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>  

html description list

HTML Description List | HTML Definition List

HTML Description List or Definition List displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

The 3 HTML description list tags are given below:

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

  1. <dl>  
  2.   <dt>HTML</dt>  
  3.   <dd>is a markup language</dd>  
  4.   <dt>Java</dt>  
  5.   <dd>is a programming language and platform</dd>  
  6.  <dt>JavaScript</dt>  
  7.  <dd>is a scripting language</dd>  
  8.   <dt>SQL</dt>  
  9.   <dd>is a query language</dd>   
  10. </dl>  

Test it Now

Output:

HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language

html unordered list

HTML Unordered List | HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted format. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:

  • disc
  • circle
  • square
  • none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type Description
Type “disc” This is the default style. In this style, the list items are marked with bullets.
Type “circle” In this style, the list items are marked with circles.
Type “square” In this style, the list items are marked with squares.
Type “none” In this style, the list items are not marked .

HTML Unordered List Example

  1. <ul>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  

Test it Now

Output:

  • HTML
  • Java
  • JavaScript
  • SQL

ul type=”circle”

  1. <ul type=“circle”>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  

Test it Now

Output:

  • HTML
  • Java
  • JavaScript
  • SQL

ul type=”square”

  1. <ul type=“square”>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  

Test it Now

Output:

  • HTML
  • Java
  • JavaScript
  • SQL

ul type=”none”

  1. <ul type=“none”>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  

Test it Now

Output:

  • HTML
  • Java
  • JavaScript
  • SQL

html ordered lists

HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. There can be different types of numbered list:

  • Numeric Number (1, 2, 3)
  • Capital Roman Number (I II III)
  • Small Romal Number (i ii iii)
  • Capital Alphabet (A B C)
  • Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description
Type “1” This is the default type. In this type, the list items are numbered with numbers.
Type “I” In this type, the list items are numbered with upper case roman numbers.
Type “i” In this type, the list items are numbered with lower case roman numbers.
Type “A” In this type, the list items are numbered with upper case letters.
Type “a” In this type, the list items are numbered with lower case letters.

HTML Ordered List Example

Let’s see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type=”1″ because it is the default type.

  1. <ol>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type=”I”

Let’s see the example to display list in roman number uppercase.

  1. <ol type=“I”>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type=”i”

Let’s see the example to display list in roman number lowercase.

  1. <ol type=“i”>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type=”A”

Let’s see the example to display list in alphabet uppercase.

  1. <ol type=“A”>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type=”a”

Let’s see the example to display list in alphabet lowercase.

  1. <ol type=“a”>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

start attribute

The start attribute is used with ol tag to specify from where to start the list items.

<ol type=”1″ start=”5″> : It will show numeric values starting with “5”.

<ol type=”A” start=”5″> : It will show capital alphabets starting with “E”.

<ol type=”a” start=”5″> : It will show lower case alphabets starting with “e”.

<ol type=”I” start=”5″> : It will show Roman upper case value starting with “V”.

<ol type=”i” start=”5″> : It will show Roman lower case value starting with “v”.

  1. <ol type=“i” start=“5”>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

html lists

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>  

Test it Now

Output:

  1. Aries
  2. Bingo
  3. Leo
  4. Oracle

Click here for full details of HTML ordered list. HTML Ordered List


HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

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

Test it Now

Output:

  • Aries
  • Bingo
  • Leo
  • Oracle

Click here for full details of HTML unordered list. HTML Unordered List


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>  

Test it Now

Output:

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.

html table

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>  

Test it Now

Output:

First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.


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>  

Test it Now

Output:

First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

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>  

Test it Now

You can collapse all the borders in one border by border-collapse property.

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

Test it Now

Output:

Name Last Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

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>  

Test it Now

Output:

Name Last Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

HTML Table with colspan

If you want to make a cell span more than one column, you can use the colspan attribute.

Let’s see the example that span two columns.

CSS code:

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

HTML code:

  1. <table style=“width:100%”>  
  2.   <tr>  
  3.     <th>Name</th>  
  4.     <th colspan=“2”>Mobile No.</th>  
  5.   </tr>  
  6.   <tr>  
  7.     <td>Ajeet Maurya</td>  
  8.     <td>7503520801</td>  
  9.     <td>9555879135</td>  
  10.   </tr>  
  11. </table>  

Test it Now

Output:

Name Mobile No.
Ajeet Maurya 7503520801 9555879135

HTML Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.

Let’s see the example that span two rows.

CSS code:

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

HTML code:

  1. <table>    
  2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>    
  3. <tr><th rowspan=“2”>Mobile No.</th><td>7503520801</td></tr>    
  4. <tr><td>9555879135</td></tr>    
  5. </table>   

Test it Now

Output:

Name Ajeet Maurya
Mobile No. 7503520801
9555879135

HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag only.

  1. <table>  
  2. <caption>Student Records</caption>  
  3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
  4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>  
  5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>  
  6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>  
  7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>  
  8. </table>  

Test it Now


Styling HTML table even and odd cells

CSS code:

  1. <style>  
  2. table, th, td {  
  3.     border: 1px solid black;  
  4.     border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.     padding: 10px;  
  8. }  
  9. table#alter tr:nth-child(even) {  
  10.     background-color: #eee;  
  11. }  
  12. table#alter tr:nth-child(odd) {  
  13.     background-color: #fff;  
  14. }  
  15. table#alter th {  
  16.     color: white;  
  17.     background-color: gray;  
  18. }  
  19. </style>  

Test it Now

Output:

html table even and odd


Supporting Browsers

Element chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<table> Yes Yes Yes Yes Yes


html image

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”/>  

Test it Now

Output:

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.

html.anchor

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>  

Test it Now


Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.

visited link displayed underlined and purple.

An active link is underlined and red.