*** This is my practice website to learn and practice HTML, using Microsoft Step By Step book, by Faithe Wempen. ***

Creating Tables

Simple table

<table border="5px">
<tr>
  <th>Heading 1</th>
  <th>Heading 2</th>
</tr>
<tr>
  <td>cell 1</td>
  <td>cell 2</td>
</tr>
<tr>
  <td>cell 3</td>
  <td>cell 4</td>
</tr>
</table>

Heading 1 Heading 2
cell 1 cell 2
cell 3 cell 4

Merging cells

<td colspan="3">
<td rowspan="2">

Background / Foreground

<tr style="background-color: tan">
<table style="background-image: url(images/leaf.gif)>
<table style="color: blue">

Padding, Spacing, Alignment

Padding: space between cell border and text: <table cellpadding="4px">
Spacing: space between cells: <table cellspacing="0px">
Alignment: vertical and horizontal placement of the cell's content:
<td style="text-align: center; vertical-align: middle">
<td align="center" valign="middle">

Column formatting

The <colgroup> tag can be used as a one-sided tag or a two-sided tag (if applied to only a certain number of rows).

To format several columns, use the span argument.
To format subsets of columns, use <col>.

<colgroup span="3">
<colgroup span="2" style="background-color: yellow">
  <col />
  <col style="font-style: italic" /<
<colgroup span="1" style="background-color: orange">

Width and Height

<table width=100%>
<table style="width: 100%">
<table height=100%>

<table width="750px">
<table height="400px">

<td width="200px">
<td style="width: 200px">

Borders

Colors

<table border="1px">
<table border="8px" bordercolor="red">
<table border="12px" bordercolor="red" bordercolorlight="lightcoral" bordercolordark="darkred">

Frame and Rules arguments

Use frame argument to specify sides of the outer frame:

  • above: top border
  • below: bottom border
  • border or box: all sides
  • hsides: top and bottom
  • vsides: left and right
  • lhs: left side
  • rhs: right side
  • void: no border

Use rules arguments to specify inner lines:

  • all: all inner lines
  • cols: vertical inner lines
  • rows: horizontal inner lines
  • none: no inner lines
  • group: lines around defined groups

<table border="1" frame="vsides" rules="cols">

Styles

  • border-width: thickness
  • border-color: color (by name, hex, or RGB value)
  • border-style: solid, dotted, dashed, double, groove, ridge, inset, outset, none
  • border-top-[attribute]: to apply to only one side (top, bottom, right, left)

<td style="border-style: groove; border-color: silver">