HTML/XHTML:Tables(CSS)

From virtualMV2015wiki
Jump to: navigation, search
 Home  HTML/XHTML <

Overview

Icon Objective.png

Objective

By the end of this page you should be able to:
  • Understand how Tables can be formatted using CSS elements

Table CSS Settings

  • Setting borders
    • style="border: 1px solid #808080;"
  • Background colour
    • style="background-color: #DDFFEE;"
  • Centering a table
    • style="width: 50%; margin-right:auto;margin-left:auto;"
  • Box shadow (CSS3). (Zen Elements, 2009)[1] (They also describe other neat effects such as rounded borders, and shadowing text elements)
The CSS3 box-shadow & text-shadow is written box-shadow: Apx Bpx Cpx #XXX;
- Apx = x-axis
- Bpx = y-axis
- Cpx = cast length / feathering
- #XXX = colour as usual

Examples

<table style="border: 1px solid #808080; width: 50%; margin-right:auto;margin-left:auto">
  <tr><td>rent</td><td>$300.00</td></tr>
  <tr><td>phone</td><td>$55.00</td></tr>
</table>


rent$300.00
phone$55.00


By adding a border to each cell we can have a table with a border round all the cells

<table style="border-collapse:collapse; margin-right:auto;margin-left:auto;">
  <tr><td style="border: 1px solid">rent</td><td style="border: 1px solid">$300.00</td></tr>
  <tr><td style="border: 1px solid">phone</td><td style="border: 1px solid">$55.00</td></tr>
</table>


rent$300.00
phone$55.00

Example of a shadow border (CSS3)

<table style="border-collapse:collapse; margin-right:auto;margin-left:auto;
   -webkit-box-shadow: 5px 5px 7px #999;-webkit-border-bottom-right-radius: 15px;">
  <tr><td style="border: 1px solid">rent</td><td style="border: 1px solid">$300.00</td></tr>
  <tr><td style="border: 1px solid">phone</td><td style="border: 1px solid">$55.00</td></tr>
</table>


rent$300.00
phone$55.00

Example of a shadow border with a rounded corner (CSS3)

<table style="margin-right:auto;margin-left:auto;
   border: 1px solid #808080;
   -webkit-box-shadow: 5px 5px 7px #999;-webkit-border-bottom-right-radius: 15px;">
  <tr><td">rent</td><td">$300.00</td></tr>
  <tr><td">phone</td><td>$55.00</td></tr>
</table>


rent$300.00
phone$55.00

Icon References.png References

  1. Zen Elements(2009) CSS3 Shadows (Border, Images & Text). Retrieved August 8, 2009 from http://www.zenelements.co.uk/blog/css3-shadows-border-image-text/

HTML/XHTML:Tables(CSS). (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 13, 2017, from http://www.virtualmv.com/wiki/index.php?title=HTML/XHTML%3ATables(CSS)    (zotero)