HTML table formatting

HTML table formatting key component of HTML markup; tables are often used as templates for site layout, although it is more common and more widely accepted to use "div" tags, saving tables to display information that would typically be presented in such a table.

## Contents

* 1 Syntax
* 1.1 Standard
* 1.2 Colspan and Rowspan
* 1.3 Borders
* 1.3.1 Separated
* 1.3.2 Style
* 1.4 Frames and Rules
* 1.4.1 Note
* 1.5 Cellpadding and Cellspacing
* 1.5.1 Cellpadding
* 1.5.2 Cellspacing
* 2 See also

## Syntax[edit]

### Standard[edit]

Every table starts out with the ordinary tag `<table>`. This is typically followed by a `<tr>` tag which signifies the beginning of a new row. This is followed by a `<td>` tag which stands for "table data" - i.e. every box inside the row. Each td and tr tag must be closed, as must the table tag. (`</td></tr></table>`)

| <\-- Each black item is a table data

|
|

| <\-- This blue item is the table row

How that was done:
<table>

<tr> | <td style="background:black" ><br/></td> | <td style="background:black" ><br/></td> | </tr>

|
|
|

<tr> | <td "colspan="2"><br/></td> | </tr>

</table>

### Colspan and Rowspan[edit]

Every row must have the same number of table datas, occasionally table datas have to span more than one column or row. In this case the tags colspan and/or rowspan are used - where they are set to a number.

| <\-- This row has three table datas

|
|
|

| <\-- This row has two. The first uses `colspan="2"`

| <\-- This row has three table datas, but one spans two rows because it uses `rowspan="2"`

| <\-- This row has only two table datas, because its first is being taken up.

### Borders[edit]

Border can be done one of two ways.

#### Separated[edit]

The most common way to do borders is having a border variable isolated - as in: `<TABLE border='3px'>` However this element is relatively restricted - as you are unable to efficiently change the color of the border because the element "bordercolor" does not work on all browsers.

#### Style[edit]

Border can also be combined with the style variable. This border argument is presented with 3 sub-components - width, style (hidden, dotted, dashed, solid, double, groove, ridge, inset, outset) and color.`<table style="border: 1px solid blue">`

### Frames and Rules[edit]

Frames and Rules are different ways of formating tables. Put simply, frames are the outside border of the table, and rules are the inside borders. In Firefox, rules is commonly used when borders are in the style element because it allows an inside border to show up. In Internet Explorer, this can't be done.

Various Tables and Borders[1]

Code  | Result  | Code  | Result
`<table border="1">` |  | blue| skies

|

pink| hearts
green| clover
`<table style="border: 1px solid blue">` |  | blue| skies

|

pink| hearts
green| clover
`<table style="border: 1px solid blue" rules="all">` |  | blue| skies

|

pink| hearts
green| clover
`<table style="border-top:1px solid blue; border-bottom: 3px solid maroon; border-right:none; border-left: 1px double black">` |  | blue| skies

|

pink| hearts
green| clover
`<table frame="HSides" rules="all">` |  | blue| skies

|

pink| hearts
green| clover
`<table frame="VSides" rules="none">` |  | blue| skies

|

pink| hearts
green| clover
`<table frame="box">` |  | blue| skies

|

pink| hearts
green| clover
`<table RULES="ROWS">` |  | blue| skies

|

pink| hearts
green| clover

##### Note[edit]

[1]Borders can also more tediously be set for <td> and <th> tags.

### Cellpadding and Cellspacing[edit]

#### Cellpadding[edit]

Cellpadding controls the distance between the contents of an individual cells i.e. <td> tags and the cell boundaries.

#### Cellspacing[edit]

Cellspacing controls the distance in between individual cells (i.e. <td> tags).

## See also[edit]

* C programming language