How to Change Font of a Details Table

Tables are HTML elements.

Tables are common elements on web pages. They are used to format the information displayed to the user. A details table is an element that displays all the detail for an object, such as a product, customer or business. Some website designers use a different font in these tables to set them apart from the main text in the web page. A table element has a "font" property that can be used to change the style for the details text.

Instructions

1. Open your HTML file in any text editor. You can use a simple text editor such as Notepad or more advanced editors like Notepad++ or Visual Studio.

2. Locate your HTML header. The "head" tag is just below the "html" tag, which is the start of all HTML files. Under the "head" tag, insert the start of a CSS code block. This indicates to the web browser that a style is reserved for one of the elements on the page. Here is how you create a CSS style block:
   <style type="text/css"> </style>

3. Create your CSS class shell for the detail table. The class shell specifies the type of HTML element used and the class name. This code creates a class called "details" used for the table element:
   <style type="text/css">
   table.details
   {
   }
   </style>

4. Set the font style. Now that the class shell is created, you can set your font. The font style takes the size for the font, the font name and its family. This code creates a small, 10px font using the Arial style and sans-serif family:
   <style type="text/css">
   table.details
   {
   font:10px arial,sans-serif;
   }
   </style>

5. Apply the style to your details table. Although the CSS class is created, it is not implemented until you add it to your details table. The following code illustrates how to implement the font changes to your details table:
   <table class="details">
   <tr><td>My Details Table</td></tr>
   </table>

References

• W3Schools: Font Style Example