How to Add Space to the Edge & the Left Side of a Table in HTML

By using Cascading Style Sheets to position objects on a Web page, you can change your layout quickly without touching the HTML code that defines your object. Tables, for instance, are useful for displaying tabular data. If you do not style a table, it sits on the left edge of the browser. You can experiment with different layout styles by using CSS to add any number of spaces to a table's left edge.

Instructions

1

Open an HTML document using your HTML editor or Notepad.

2

Add the code shown below to the document's body section:












A	B
B	D

This code adds a "table" tag to the body section. Adding this tag creates a simple table containing four elements. The table tag references a CSS class named "addSpacesLeft."

3

Paste the following CSS code into the documents head section:

This is the addSpacesLeft class. Note that CSS class names have periods at the beginning of their names. However, when you reference the class in the HTML as shown in the previous step, no period appears in front of the name. This CSS class has a margin-left attribute. The attributes value is 100px. This stands for 100 pixels. Since the table tag references this class, the tables left margin will appear 100 pixels from the browsers left edge.