Example A description list, with terms and descriptions: <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Try it Yourself » Definition and Usage The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name). Browser Support Element <dl> Yes Yes Yes Yes Yes Differences Between […]
Example An <input> element with pre-defined values in a <datalist>: <input list=”browsers”> <datalist id=”browsers”> <option value=”Internet Explorer”> <option value=”Firefox”> <option value=”Chrome”> <option value=”Opera”> <option value=”Safari”> </datalist> Try it Yourself » Definition and Usage The <datalist> tag specifies a list of pre-defined options for an <input> element. The <datalist> tag is used to provide an “autocomplete” feature on <input> elements. Users will see […]
Example The following example displays product names but also associates each name with a product number: <ul> <li><data value=”21053″>Cherry Tomato</data></li> <li><data value=”21054″>Beef Tomato</data></li> <li><data value=”21055″>Snack Tomato</data></li> </ul> Try it Yourself » Definition and Usage The <data> tag links the given content with a machine-readable translation. This element provides both a machine-readable value for data processors, and a human-readable […]
Example How to define a time and a date: <p>We open at <time>10:00</time> every morning.</p> <p>I have a date on <time datetime=”2008-02-14 20:00″>Valentines day</time>.</p> Try it Yourself » Definition and Usage The <time> tag defines a human-readable date/time. This element can also be used to encode dates and times in a machine-readable way so that user agents can offer […]
Example A <colgroup> element that specifies that the first column should have a predefined width of 200 pixels: <table> <colgroup width=”200″> <tr> <th>Month</th> <th>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 column group. Normally, a column group takes […]
Example An HTML table with different vertical-aligned columns: <table style=”height:200px”> <colgroup valign=”top”> <colgroup valign=”bottom”> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Try it Yourself » Definition and Usage The valign attribute specifies the vertical alignment of the content in a column group. Browser Support Attribute valign Not supported Yes Not supported Not supported Not supported The […]
Example Set the background color of the first two columns using the <colgroup> span attribute: <table> <colgroup span=”2″ style=”background:red”></colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr> </table> Try it Yourself » Definition and Usage The span attribute defines the number of columns a <colgroup> element […]
Example In the example below, the content of the second column is aligned two characters to the right from the “.” character: <table style=”width:100%”> <colgroup align=”left”></colgroup> <colgroup align=”char” char=”.” charoff=”2″></colgroup> <tr> <th>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 <colgroup> charoff attribute is not supported in HTML5. The […]
Example In the example below, the content of the second column should be aligned to the “.” character: <table style=”width:100%”> <colgroup align=”left”></colgroup> <colgroup align=”char” char=”.”></colgroup> <tr> <th>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 <colgroup> char attribute is not supported in HTML5. The char attribute specifies the […]
Example Two <colgroup> elements that specify different alignment for the three columns in the table (notice that the first <colgroup> element spans two columns): <table style=”width:100%”> <colgroup span=”2″ align=”left”></colgroup> <colgroup align=”right”></colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> Try it Yourself » Definition and Usage The align attribute specifies the horizontal alignment of […]
Example Set the background color of the three columns with the <colgroup> and <col> tags: <table> <colgroup> <col span=”2″ style=”background-color:red”> <col style=”background-color:yellow”> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> Try it Yourself » Definition and Usage The <col> tag specifies column properties for each column within a <colgroup> element. The <col> tag is […]
Example Two <col> elements with a predefined width: <table> <col width=”130″> <col width=”80″> <tr> <th>Month</th> <th>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 <col> element. Normally, a <col> element takes up the space it needs to display the content. […]
Example An HTML table with different vertical-aligned columns: <table style=”height:200px”> <col valign=”top”> <col valign=”bottom”> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Try it Yourself » Definition and Usage The valign attribute specifies the vertical alignment of the content related to a <col> element. Browser Support Attribute valign Not supported Yes Not supported Not supported Not supported […]
Example Here, the first two columns should have a background color of red: <table> <colgroup> <col span=”2″ style=”background-color:red”> <col style=”background-color:yellow”> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> Try it Yourself » Definition and Usage The span attribute defines the number of columns a <col> element should span. Browser Support Attribute span […]
Example In the example below, the content of the second column is aligned two characters to the right from the “.” character: <table style=”width:100%”> <col align=”left”> <col align=”char” char=”.” charoff=”2″> <tr> <th>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 <col> charoff attribute is not supported in HTML5. The […]
Example In the example below, the content of the second column should be aligned to the “.” character: <table style=”width:100%”> <col align=”left”> <col align=”char” char=”.”> <tr> <th>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 <col> char attribute is not supported in HTML5. The char attribute specifies the […]
Example Specify the alignment for the three columns in the table: <table style=”width:100%”> <col align=”left”> <col align=”left”> <col align=”right”> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> Try it Yourself » Definition and Usage The align attribute specifies the horizontal alignment of the content related to a <col> element. Browser Support Attribute align Not […]
Example Set the background color of the three columns with the <colgroup> and <col> tags: <table> <colgroup> <col span=”2″ style=”background-color:red”> <col style=”background-color:yellow”> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> Try it Yourself » Definition and Usage The <colgroup> tag specifies a group of one or more columns in a table for […]
Example Format text in a document: <var>Variable</var> Try it Yourself » Definition and Usage The <var> tag is a phrase tag. It defines a variable. Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS. All phrase tags: Tag Description <em> Renders as emphasized text <strong> Defines important text <code> […]
Example Format text in a document: <kbd>Keyboard input</kbd> Try it Yourself » Definition and Usage The <kbd> tag is a phrase tag. It defines keyboard input. Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS. All phrase tags: Tag Description <em> Renders as emphasized text <strong> Defines important text […]
