Example Create a drop-down list with four options: <select> <option value=”volvo”>Volvo</option> <option value=”saab”>Saab</option> <option value=”mercedes”>Mercedes</option> <option value=”audi”>Audi</option> </select> Try it Yourself » Definition and Usage The <select> element is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. Browser Support Element <select> Yes Yes Yes Yes Yes Tips and Notes […]
Example A drop-down list with four options: <select> <option value=”volvo”>Volvo</option> <option value=”saab”>Saab</option> <option value=”opel”>Opel</option> <option value=”audi”>Audi</option> </select> Try it Yourself » Definition and Usage The <option> tag defines an option in a select list. <option> elements go inside a <select> or <datalist> element. Browser Support Element <option> Yes Yes Yes Yes Yes Tips and Notes Note: The <option> tag can be used without any […]
Figcaption Object The Figcaption Object is new in HTML5. The Figcaption object represents an HTML <figcaption> element. Access a Figcaption Object You can access a <figcaption> element by using getElementById(): Example var x = document.getElementById(“myFigCap”); Try it Yourself » Create a Figcaption Object You can create a <figcaption> element by using the document.createElement() method: Example var x […]
Example A <fieldset> with a name attribute: <fieldset name=”personalia”> Name: <input type=”text”><br> Email: <input type=”text”><br> </fieldset> Try it Yourself » Definition and Usage The name attribute specifies a name for a fieldset. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. Browser Support Attribute name Yes Not supported […]
Example Group related elements in a form: <form> <fieldset> <legend>Personalia:</legend> Name: <input type=”text” size=”30″><br> Email: <input type=”text” size=”30″><br> Date of birth: <input type=”text” size=”10″> </fieldset> </form> Try it Yourself » Definition and Usage The <legend> tag defines a caption for the <fieldset> element. Browser Support Element <legend> Yes Yes Yes Yes Yes Differences Between HTML 4.01 and HTML5 The “align” attribute is not supported in HTML5. […]
Example Header cells with a predefined width: <table> <tr> <th width=”70%”>Month</th> <th width=”30%”>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Try it Yourself » Definition and Usage The width attribute specifies the width of a table header cell. Normally, a cell takes up the space it needs to display the content. The width attribute […]
Example An HTML table with a header cell that spans three rows: <table> <tr> <th>Month</th> <th>Savings</th> <th rowspan=”3″>Savings for holiday!</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The rowspan attribute defines the number of rows a header cell should span. […]
Example Two header cells with a predefined height: <table> <tr> <th height=”100″>Month</th> <th height=”100″>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Try it Yourself » Definition and Usage The height attribute specifies the height of a header cell. If no height attribute is set, a header cell takes up the space it needs to […]
Example Specify the <th> element each header cell is related to: <table> <tr> <th id=”name” colspan=”2″>Name</th> </tr> <tr> <th headers=”name”>Firsname</th> <th headers=”name”>Lastname</th> </tr> </table> Try it Yourself » Definition and Usage The headers attribute specifies one or more header cells a header cell is related to. Browser Support Attribute headers Yes Yes Yes Yes Yes The headers attribute has […]
Example An HTML table with a header cell that spans two columns: <table> <tr> <th colspan=”2″>Monthly Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Try it Yourself » Definition and Usage The colspan attribute defines the number of columns a header cell should span. Browser Support Attribute colspan Yes Yes Yes Yes Yes […]
Example Align the content of the first header cell to the “M” character: <table> <tr> <th align=”char” char=”M”>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table> Try it Yourself » Definition and Usage The <th> char attribute is not supported in HTML5. The char attribute specifies the alignment of the content in a header […]
Example Add a background color to header cells: <table> <tr> <th bgcolor=”#FF0000″>Month</th> <th bgcolor=”#00FF00″>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Try it Yourself » Definition and Usage The bgcolor attribute specifies the background color of a header cell. Browser Support Attribute bgcolor Yes Yes Yes Yes Yes Compatibility Notes The bgcolor attribute of <th> is not supported […]
Example Use of the abbr attribute in an HTML table: <table> <tr> <th abbr=”Make”>Toy manufacturer</th> <th abbr=”Model”>Vehicle model</th> </tr> <tr> <td>Bruder Toys</td> <td>Cross Country Vehicle</td> </tr> <tr> <td>Bruder Toys</td> <td>DHL Lorry</td> </tr> </table> Try it Yourself » Definition and Usage The abbr attribute specifies a shorter version of the content in a header cell. Browser Support Attribute […]
Example Vertical align the content inside the <thead> element to the bottom: <table> <thead valign=”bottom”> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Try it Yourself » Definition and Usage The <thead> valign attribute is not supported in HTML5. Use CSS instead. The valign attribute specifies the vertical alignment of […]
Example Align the content inside the <thead> two characters to the right from the “M” character: <table> <thead align=”char” char=”M” charoff=”2″> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Try it Yourself » Definition and Usage The <thead> charoff attribute is not supported in HTML5. The charoff attribute sets the number of […]
Example Left-align the content inside the <thead> element: <table> <thead align=”left”> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Try it Yourself » Definition and Usage The align attribute specifies the horizontal alignment of the content inside the <thead> element. Browser Support Attribute align Yes Yes Yes Yes Yes Note: IE […]
An HTML table with a <thead>, <tbody>, and a <tfoot> element: <table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> Try it Yourself » Definition and Usage The <tbody> tag is used to group the body content in an HTML […]
Example Define a title for your HTML document: <!DOCTYPE html> <html><head> <title>HTML Reference</title> </head> <body> The content of the document…… </body> </html> Try it Yourself » Definition and Usage The <title> tag is required in all HTML documents and it defines the title of the document. The <title> element: defines a title in the browser toolbar […]
Example Add a background color to the first table row: <table> <tr bgcolor=”#FF0000″> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Try it Yourself » Definition and Usage The bgcolor attribute specifies a background color of a table row. Browser Support Attribute bgcolor Yes Yes Yes Yes Yes Compatibility Notes The bgcolor attribute of <tr> is […]
Example Right-align the content of all the cells in the second table row: <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr align=”right”> <td>January</td> <td>$100</td> </tr> </table> Try it Yourself » Definition and Usage The align attribute specifies the horizontal alignment of the content in a table row. Browser Support Attribute align Yes Yes Yes Yes Yes Note: None of […]
