Table caption can be positioned: top (1), bottom (2), left (3), and right (4).
| XML Source | CSS stylesheet | Example link |
|---|---|---|
|
(1)
<AAA> <XXX>xxxx</XXX> <BBB> <CCC>ccc1</CCC> <DDD>ddd1</DDD> <EEE>eee1</EEE> </BBB> <BBB> <CCC>ccc2</CCC> <DDD>ddd2</DDD> <EEE>eee2</EEE> </BBB> </AAA> | AAA {display: table} XXX {display:table-caption; color:red; caption-side:top } BBB {display: table-row} CCC {display: table-cell} DDD {display: table-cell} EEE {display: table-cell} | View output |
| XML Source | CSS stylesheet | Example link |
|
(2)
<AAA> <XXX>xxxx</XXX> <BBB> <CCC>ccc1</CCC> <DDD>ddd1</DDD> <EEE>eee1</EEE> </BBB> <BBB> <CCC>ccc2</CCC> <DDD>ddd2</DDD> <EEE>eee2</EEE> </BBB> </AAA> | AAA {display: table} XXX {display:table-caption; color:red; caption-side:bottom } BBB {display: table-row} CCC {display: table-cell} DDD {display: table-cell} EEE {display: table-cell} | View output |
| XML Source | CSS stylesheet | Example link |
|
(3)
<AAA> <XXX>xxxx</XXX> <BBB> <CCC>ccc1</CCC> <DDD>ddd1</DDD> <EEE>eee1</EEE> </BBB> <BBB> <CCC>ccc2</CCC> <DDD>ddd2</DDD> <EEE>eee2</EEE> </BBB> </AAA> | AAA {display: table} XXX {display:table-caption; color:red; caption-side:right; width:5em } BBB {display: table-row} CCC {display: table-cell} DDD {display: table-cell} EEE {display: table-cell} | View output |
| XML Source | CSS stylesheet | Example link |
|
(4)
<AAA> <XXX>xxxx</XXX> <BBB> <CCC>ccc1</CCC> <DDD>ddd1</DDD> <EEE>eee1</EEE> </BBB> <BBB> <CCC>ccc2</CCC> <DDD>ddd2</DDD> <EEE>eee2</EEE> </BBB> </AAA> | AAA {display: table} XXX {display:table-caption; color:red; caption-side:left; width:5em } BBB {display: table-row} CCC {display: table-cell} DDD {display: table-cell} EEE {display: table-cell} | View output |