HTML Table Class Style Tutorial
A HyperText Markup Language (HTML) table holds your tabular data in rows and columns and presents the content in an organized way on your Web page. As you create this element, you have the option to format the table's text and appearance, such as the border color, using a Cascading Style Sheets (CSS) class. This class applies your formatting preferences to the various components of your table. Use your computer's text editor software to apply a table class style in your HTML document.
Other People Are Reading
Instructions
-
-
1
Launch your text editor software and open the HTML page that contains your table.
-
2
Place your cursor between the "<head></head>" elements of your document. Type in the CSS code that creates a placeholder for your table styles:
<style type="text/css">
{ }
</style>
-
-
3
Enter "table." before the curly brackets and then type in a desired term that identifies the class name. The period after the "table" selector indicates that this is a class style. Type the class name, such as "example," as follows:
table.example { }
-
4
Type "border:" between the curly brackets and enter a number value in pixels (px) to specify how thick the table border is. Follow this with a line style such as "solid," "dashed" or "dotted" to determine how the border line appears and type in a color name, such as "blue," to name the color of the border. Type a semicolon after your entry. To illustrate:
table.example { border: 1px dotted blue; }
-
5
Enter "text-align:" and type "center," "right" or "left" to determine the horizontal position of your data inside the table. For example:
table.example { border: 1px dotted blue; text-align: center; }
-
6
Type "padding:" and enter a pixel number to specify how much space you want between your content and the border of the table. For instance:
table.example { border: 1px dotted blue; text-align: center; padding: 10px; }
-
7
Position your cursor inside the opening "<table>" tag. Type "class=" and then enter your chosen class name after this to assign the style rules to your table. To illustrate:
<table class="example">
-
8
Save your document. Your table is now formatted to your style rule.
-
1
