Styling Tables

Styling Tables

Inline styling is CSS that is added directly to individual elements using the <style> tag. Most designers recommend using inline styling sparingly. It is highly recommended that tables be used for tabular data. Photos are used in some samples below to show detail.

Alignment

Vertical Alignment – Determines where in the parent element (top to bottom) the content sits.

No Alignment Set
Default Vertical Alignment/No Styling Set

Default Vertical Alignment/No Styling

Default Vertical Alignment/No Styling Set

Vertical Alignment Set to Top
Sample Code-Alignment

Vertical Alignment Top

Vertical Alignment Top

Vertical Alignment Set to Middle
Sample Code -

Vertical Alignment Middle

Vertical Alignment Middle


Borders

Table Borders – Add Borders to the outside of the entire table (or portions of it)

Sample Code - Table Borders

Table Borders

Table Borders


Row Borders – Add borders to individual rows

Sample Code - Row Borders

Row Border Sample

Row Borders

Cell Borders – Add borders to individual cells

Cell Borders - Sample Code

Cell Borders

Cell Borders


Adding Colors – Change the background and text color of data and cells

Adding Colors - Sample Code

Adding Colors

Adding Colors


With advanced styling, you can also:

  • Add Padding
  • Control Border Collapse
  • Merge Cells
  • Wrap Text
  • Add a second Axis

For more information Visit:

Image Alignment
Beginning HTML
Advanced HTML
CSS Basics

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s