Caption position and alignment

This table should have a caption on the top, 75% of the width of the blue bordered division:

The table's caption.
DataData
DataData

This table should have a caption on the top, 150% of the width of the blue bordered division:

The table's caption.
DataData
DataData

This table should have a caption on the bottom, 75% of the width of the blue bordered division:

The table's caption.
DataData
DataData

This table should have a caption on the bottom, 150% of the width of the blue bordered division:

The table's caption.
DataData
DataData

The next four tables should have captions of a "reasonable size". The first two should be on the left, the next two on the right:

The table's caption.
DataData
DataData
The table's caption.
DataData
DataData
The table's caption.
DataData
DataData
The table's caption.
DataData
DataData

The next four tables should have a caption that is 200px * 200px. They should be on the top, right, bottom, and left, respectively:

The table's caption.
DataData
DataData
The table's caption.
DataData
DataData
The table's caption.
DataData
DataData
The table's caption.
DataData
DataData

These four tables should have captions whose border edges touch the edge of the blue bordered div on both sides:

The table's caption.
DataData
DataData
The table's caption.
DataData
DataData
The table's caption.
DataData
DataData
The table's caption.
DataData
DataData

The next eight tables should all have 200px * 200px captions.

The following tests are misleading, because vertical-align should only have an effect on captions that have caption-side of right or left.

caption-side
bottom
vertical-align
bottom
text-align
center
The table's caption.
DataData
DataData
caption-side
left
vertical-align
top
text-align
left
The table's caption.
DataData
DataData
caption-side
top
vertical-align
top
text-align
right
The table's caption.
DataData
DataData
caption-side
bottom
vertical-align
middle
text-align
left
The table's caption.
DataData
DataData
caption-side
left
vertical-align
bottom
text-align
right
The table's caption.
DataData
DataData
caption-side
bottom
vertical-align
top
text-align
center
The table's caption.
DataData
DataData
caption-side
right
vertical-align
middle
text-align
center
The table's caption.
DataData
DataData
caption-side
right
vertical-align
middle
text-align
right
The table's caption.
DataData
DataData

Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org