Captions

The caption tag allows you to specify sayings for your platforms. This is not an feature of the desk tag; it’s a separate factor used after the desk tag, but before the first desk row. Here is the first part of the desk markup:
<table border="3" align="right" bgcolor="#999">
<caption>This is a "cat's game" of tic-tac-toe.</caption>
<tr>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>

Opening and ending caption labels encompass the real textual content you want to screen as a caption for the desk. By standard, the caption is arranged at the top-center of the desk. Two CSS qualities are useful in modifying the caption alignment:

text-align Use this to modify whether the textual content is arranged eventually left, right, or middle on whatever part it is placed.
caption-side Use this to specify on which part the caption should be placed (top, right, base, or left).

With those qualities in thoughts, can you determine how to arrange a caption along the base of a desk, and then set the textual content to be right-aligned along that edge? reveals a visible example:
                                 

and the following code provides the answer.

caption {text-align: right; caption-side: bottom;}

TIP

You can also use extra style qualities to sketch more interest to a caption, such as creating it strong or different colours.

Background Images

The background-image residence can be included to your design piece to utilize an picture to the whole desk qualifications. The background-image residence performs the same when used to a desk as it does used to other website things. This means it instantly do it again from eventually left to right, top to base. However, you can use the other qualifications qualities mentioned in Part 6 (such as background-repeat and background-attachment) to modify the saying alternatives if preferred.
Adding a qualifications picture is one way you could obtain a uneven or designed desk qualifications, as shown:
                                    

This only requires a small repeating image, such as the following:

                                                        

and a bit of code added to your style sheet:

table {background-image: url('images/stripes.gif');}

Colors

To change the qualifications shade of an whole desk, you can add the qualifications shade property to your design piece, using the desk tag as the selector. The following example reveals how this might look in an inner design piece, say the desk you are style is the only desk on the site.
table {background-color: #999;}

                                   
But what if you did have several tables on your page? Be aware that using the preceding code would cause all tables on the page to be rendered with the same background color. To create specific styles for each table on a page that included multiple tables, you might use classes:
.table1 {background-color: #999;}
.table2 {background-color: #333;}

Then, you would referrals the category name (without the period) from the starting desk tag, as in

<table class="table1">
Depending on which technique makes the desk, the qualifications shade you specify may or may not appear within the region. Analyze your webpages in several surfers to be sure.

Basic Alignment

As mentioned in the past part on pictures, you can use the flow residence to cause a desk to be arranged to the right or eventually left of any around textual content. If only one desk prevails on the site, you can even use the desk tag as your selector, like that provided next:

table {float: right;}
The following representation reveals our tic-tac-toe desk arranged to the right of the screen, with textual content streaming around it on the eventually left. The finish resource of the site is also right here to give you a better idea how the design piece impacts the desk design.
<tr>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td>XXX</td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
</tr>
<tr>
<td>XXX</td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td>XXX</td>
</tr>
<tr>
<td>XXX</td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td>XXX</td>
</tr>
</table>
</head>
<body>
<table>
<tr>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
</tr>
<tr>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
</tr>
<tr>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
</tr>
</table>
<h1>Tic-Tac-Toe</h1>
<p>There are many places online where you can play tic-tac-toe, either
by yourself or with other Web users. Visit <a href="http://dir.yahoo.
com/Recreation/Games/Puzzles/Tic_Tac_Toe/">Yahoo Games</a> for a list
of some hot tic-tac-toe games.</p>
<p>A game like this one, in which no one wins, is often called a cat's
game. There are many theories as to why it is called that, but my
personal favorite is this: In many other games it is called a scratch
game when no one wins. Since cats scratch, you can see where the
phrase "cat's game" might have originated.</p>
</body>
</html>

                                  

Width and Height

When I first presented platforms, I described preparing out the dimension your platforms beforehand. This is particularly essential if the desk you are developing needs to fit within a established quantity of area on your web page. In “the old times,” we used top and dimension features in the desk tag to specify the preferred measurements for platforms. While that exercise is looked down upon by the W3C now, you can still obtain the same outcomes by including the top and dimension qualities to your design piece. If you never specify them in your value, the technique selects the dimension depending on the quantity of articles within each cellular and the quantity of available area in the screen.
Let’s say I want to involve that tic-tac-toe activity in my website, but I only had an available area on my web page that calculated 200 p large by 200 p high. Because platforms often “grow” according to the quantity of articles in them, I might want to control the top and dimension my desk, to prevent it increasing out of that 200 × 200–pixel area I specific for it. I could do so by specifying the measurements in my design piece. Offered there was only one desk tag on my web page, I could even use desk as my selector.
table {width: 200px; height: 200px; border: 3px solid black;}

In this case, I would specify an overall dimension for my desk, one that must not change if the technique screen were bigger or lesser.
                                    

Cell Padding and Spacing

When the region are noticeable for a desk, it’s simpler to see how much area is around the articles and in between the tissues. Two features can be included to the desk tag, so that you can management those kinds of areas.

cellpadding Space between the articles within the cellular and the sides of that cell


cellspacing Space in between each of the person cells

First, cellpadding impacts the quantity of area between the articles and the side of the cellular. When the region are noticeable, improving the cellular cushioning can provide additional shield area around the textual content, so that it does not run into the region.
Second, cellspacing impacts the quantity of area between each of the tissues in the desk. While not situated in the real tissues, this area can be improved to allow for a rain gutter between several tissues, just like the empty area between content in a paper.
The principles for both of these features should be indicated in p, as a whole variety higher than 0. A value of 0, in impact, changes off the cellular cushioning or cellular space, producing the tissues to buttocks up against one another.

The following representation reveals two illustrations of different cellpadding and cellspacing principles.
         
In the first desk, the boundary is 5 p large, the cellpadding is 15 p large, and the cellspacing is 5 p large. This makes a rather large shield location around the cellular articles, but a bit of space in between each of the tissues.
<table border="5" cellpadding="15" cellspacing="5">
When those principles are changed in the second desk, so the cellpadding is 5 p large and the cellspacing is 15 p large, the area between the tissues is improved while the area around the textual content in each cellular is decreased.
<table border="5" cellpadding="5" cellspacing="15">

The rules Attribute

The guidelines feature can be used to specify those inner region of a desk that should be shown. As with the shape feature, this feature only works if you have specified a boundary dimension higher than zero. When the guidelines feature and the boundary feature are both specified, the guidelines feature requires priority in surfers that assistance it.
            


Several possible principles are available for the guidelines features, as detailed in Table:

                 


The following representation reveals how the technique reveals the tic-tac-toe desk when the guidelines are set to “none” and the shape is set to “box” (with a boundary dimension 3).