Fred Brack   Raleigh, NC

CSS for Images and Tables to Comply with HTML5 Standards

I wrote this page based on my own 2018 experience upgrading my web pages to HTML5 standards.  I will demonstrate common HTML coding and its CSS equivalents (called properties).  Alternatives to deprecated HTML attributes (i.e., should never be used nowadays and not supported by HTML5) are shown.  To maximize the usefulness of this demo page, I am not using any predefined CLASSes in the examples; just STYLE statements showing the style properties required (though I will often refer to these changes as CSS).  This is a start:  other examples may be added!  Feedback is welcomed via the mail link at the bottom of the page.  .

On this page:

• Images
• Tables
  • Table Borders
  • Table Padding and Cell Spacing
  • Table Centering
  • Table Coding Summary
  • Table Coding Suggestions
• The Box Model
• Surprise Bonus!
• TBD ...

Elsewhere:

• Making a Website Mobile Friendly

Images

This is an image with no special attributes (just uses the basics: src, width, height, alt – and please, always use alt text!). 
<img src="../images/manwithglass1.gif" width="174" height="180" alt="Man drinking wine">

Note that no border is applied by default, therefore the border does not have to be defined with CSS as 0.  You can use CSS, however, to define a border of any thickness and declare a color and style.  The words thin, medium, and thick can be used, or define a thickness in pixels (px).  Below, you will see the three predefined thickness options implemented, plus a variation of colors and styles with:  border: thin black solid; border: medium red dashed; border: thick groove navy, noting in the last case that the order of the second two values doesn't matter.  There are numerous border styles.

Note that the img HTML attributes align, border, hspace, and vspace are all deprecated.  You should use CSS to accomplish their purpose, then apply the results to the image using the CLASS attribute.  (For our purposes, we will implement them via STYLE statements so you can examine the HTML and follow along easier; but consider making class definitions in a CSS file, such as .border2 {border: 2px black solid}.)

For example, to place an image on the left or right of text, in the "old days" we would have said align="left" or align="right".  Now we use CSS to say float:left or float:right. Note that the text starts at the top of the image, by default.  If the text exceeds the height of an image, it will spread out to full margins below the image(s).

There used to be an attribute called hspace that would define how far away from the edge of the image the abutting text could appear.  With CSS, that is implemented via the margin property.  In this example, the left image has margin: 0 10px while the right has margin: 20px 20px.  With only two parameters, the first parameter is the top and bottom margin, while the second is the left and right margin, which is what we care about here.  Note the placement of the two images carefully.  (As an aside, you cannot specify 0px; always use simply 0.)

BTW, in order to "clear" ourselves past the images in case they extend beyond the text, we use the CSS clear property on any paragraph which follows floated images (e.g., this one) like this:  clear: both.  We use "both" as opposed to "left" or "right" to clear both sides of the screen.

You may also be interested in this.  There is a new tag (not CSS!) in HTML5:  <figure>, and its sub-tag, <figcaption>.  Both require end-tags.  Using the combination aligns a caption right under a figure.  More importantly, it will align a single caption under multiple images (as below), or put the caption under floated images, or both.

Caution (especially for mobile devices):  For some bizarre reason, <figure> defaults to fairly wide margins.  You may wish to override these margins, especially if you are supporting mobile devices.  I do this in my CSS file by overriding the figure element, but you can do it via a STYLE statement either at the page level (in HEAD) or on the <figure> element itself.  For example,  <figure style="margin: 20px 2px>  will narrow the left and right margins to only 2px.

Tables

Table Borders

Let's move on to tables, as there are significant changes for HTML, with previously familiar attributes no longer supported.  Here is the basic table definition that we will modify in our examples.

<table>
  <tr>
    <td>Row 1, column 1</td>
    <td>Row 1, column 2</td>
  </tr>
  <tr>
    <td>Row 2, column 1</td>
    <td>Row 2, column 2</td>
  </tr>
</table>

And here is how that table displays (pretty dull, we know).

By default, as you see above, a table has no borders, so we'll start with adding a border to the table via adding a style statement (style="border: thin solid black") to the <table> tag.

Note that the border surrounds the table only, no cells.  To add borders between the cells (which used to come almost automatically with the old border="1" attribute), we need to add borders to the individual cell tags (<td>) by adding the same style statement used above.

Let's stop a moment.  The cell borders, even when not visible (i.e., a zero border width), are separate from the table border.  To eliminate the table border, the traditional method has been to collapse it into a single border with cells via a style statement:  style="border-collapse: collapse".  There was never a shortcut for this.  The alternative option, the default, is to keep the borders separate, and that is the name of the attribute (as opposed to collapse).  When you added borders to a table via the old border="1" attribute, it added the borders to both the table and cells, and you stopped the double-definition by using the collapse style statement.  So to eliminate the double-borders via CSS, we will add the collapse property to the <table> tag.  An alternative, of course, is to define or leave the table border at zero width.

The fact that in our example we have a border property on the <table> tag is irrelevant, since we are collapsing the border!  We will remove it from the following example.

Table Padding and Cell Spacing

The content of the cells is awfully close to the cell borders.  We used to be able to pad the cells via the CELLPADDING attribute on the <table> tag.  The replacement for that is the CSS padding property, which is applied to the <td> tag.  So below we have specified <td style="padding: 5px"> for each cell.

We also used to be able to separate the cells with spacing via the old CELLSPACING option applied to the <table> tag.  Now we do this by adding border-spacing: 10px (or whatever) to <table> without specifying the collapse option (to default to SEPARATE).  We will, however, eliminate the border on the <table> tag in this example, leaving just the cells, separating them by 10px and not specifying padding.

Just for clarity, here's the coding of the two main tags used above:

<table style="border-spacing: 10px">
<td style="border: thin solid black">Row 1, column 1</td>

Of course you are welcome to increase that amount (to 25px below), add padding (5px in this case), thicken the border, etc.

Do note how adding border-spacing increases the vertical margin above and below the table as well as between cells vertically.  You can specify different horizontal and vertical spacings using border-spacing, if you wish.  Example:  border-spacing: 10px 2px (horizontal, then vertical).

Table Centering

The old method of centering a table was usually performed like this.

<div align="center">
<center>
... table definition ...
</center>
</div>

However, both the <align> and <center> tags have been deprecated.  Now you center a table as follows.  Note that you do not use the text-align: center option to do this, as you are aligning the table itself, not its text content!  No <div> is required.

<table style="margin-left: auto; margin-right: auto">

I personally implement centering by using two separate CSS statements as follows (so I can say class="center" universally):

.center      { text-align: center }
table.center { margin-left: auto; margin-right: auto }

I have applied the centering STYLE to the summary table below.  For additional information on table centering, see Scott Granneman's page.  He discusses adding options for table width.

Table Coding Summary

Table Coding Suggestions

You may have noted what a pain it is to constantly repeat the STYLE attribute to achieve your objective.  Here are two thoughts to ease your pain!

1. Use a Style Sheet (CSS) and/or a document-level STYLE definition that you can apply using the CLASS attribute where needed (e.g., <td class="tborder">).
2. Use a document-level STYLE to override the default definition of the <table> and/or <td> tag.  You will probably want to do this just for your specific page, because you may want to do something different on another page, and it may not work well if you have multiple tables with different characteristics.

Here is an example of how you might accomplish these objectives.  Just before the </head> tag in your web page HTML, insert the following code:

<style>
td { border: thin solid black; padding: 5px }
</style>

Note that there is NO PERIOD in front of TD.  You are not defining a TD class; you are redefining the TD tag with new or modified properties.  Now every time you use the TD tag in this document, a thin black border will be applied around the cells, along with 5px of padding.  Remember that the default behavior of a table is COLLAPSE, so there will be no table border.

I personally use a base CSS file with lots of classes defined to support the options shown above.  Here is a sample from my CSS file.

/* NOTES on CSS for Tables:
Default table is TABLE (collapse + border0 + spacing0 + widthauto) and TD (padding0 + border0)
CELLPADDING is now TABLE collapse (optional) + TD paddingn
CELLSPACING is now TABLE separate (default) + spacingn (may want to add TD border0)
Table CENTERing is not done with text-align; see table.center entry */
.border0   { border-width: 0 0 0 0 } /* picture and table borders */
.border1   { border: 1px black solid }
.border2   { border: 2px black solid }
.border3   { border: 3px black solid }
.border4   { border: 4px black solid }
.border5   { border: 5px black solid }
.collapse  { border-collapse: collapse } /* can't be used with cell spacing */
.margin0   { margin: 0 } /* 1 value = 4 sides; 2 values = Top/Bot, L/R; 3 values = Top, L/R, Bot; 4 values = T/R/B/L */
.margin0   { margin: 0 }
.margin1   { margin: 1px }
.margin2   { margin: 2px }
.margin3   { margin: 3px }
.margin4   { margin: 4px }
.margin5   { margin: 5px }
.margin10  { margin: 10px }
.padding0  { padding: 0 }
.padding1  { padding: 1px }
.padding2  { padding: 2px }
.padding3  { padding: 3px }
.padding4  { padding: 4px }
.padding5  { padding: 5px }
.padding10 { padding: 10px }
.separate  { border-collapse: separate } /* default, but required for spacingn */
.spacing0  { border-spacing: 0 }
.spacing1  { border-spacing: 1px } /* Table cell spacing; requires border-collapse: SEPARATE! */
.spacing2  { border-spacing: 2px } /* These set spacing on all four sides, To set different */
.spacing3  { border-spacing: 3px } /* horizontal/vertical space, use 2 values; e.g., 3px 5px */
.spacing4  { border-spacing: 4px }
.spacing5  { border-spacing: 5px }
.spacing10 { border-spacing: 10px }
.valigntop { vertical-align: top }
.valignmid { vertical-align: middle }
.valignbot { vertical-align: bottom }
.valignbas { vertical-align: baseline }
.width10   { width: 10% } /* table widths; not for images */
.width20   { width: 20% }
.width25   { width: 25% }
.width30   { width: 30% }
.width33   { width: 33% }
.width40   { width: 40% }
.width50   { width: 50% }
.width60   { width: 60% }
.width67   { width: 67% }
.width75   { width: 75% }
.width80   { width: 80% }
.width90   { width: 90% }
.width100  { width: 100% }
.widthauto { width: auto }
table.center {
  margin-left: auto;
  margin-right: auto;
}

The Box Model

Over the years, I have found the so-called Box Model useful in web design.  Here is the model, and you can find more information on the W3 Box Model page.

Surprise Bonus!

How did I make the separator line above (which you also saw at the top of the page)?  Actually it is a horizontal rule made with the <hr> tag.  The interesting part, of course is the gradient fade-in/fade-out of the navy blue, which is your "bonus" here!  Here's the actual HTML (part of which you could obviously convert to CSS as a CLASS to make this easily repeatable on your website).

<hr style="height: 5px; width: 33%; text-align: center; border-width: 0;
    background: linear-gradient(to right, rgba(0,0,128,0), rgba(0,0,128,1), rgba(0,0,128,0)">

Here are the components of the STYLE statement:

1. The default height of a horizontal rule is too small, so specify a larger size like 5px.
2. I chose not to have the rule full page width, so I shortened it to 33%.
3. It only makes sense to center this separator if it is not full width.
4. Tricky!  You must nullify the border-width, or you will find a thin black line around your rule.
5. Now the meat:  Use the background: gradient option with whatever properties you want.  The gradient is the background image.  The "to right" means the gradient will flow left to right rather than the default of top to bottom.  Then, instead of just naming colors (like "cyan, navy, cyan") for the gradient flow, I used a special notation, RGBA, with color RGB values followed by a number between 0 (for full transparency to start and end) to 1 (for no transparency in the middle) to cause my color (navy = RGB 0,0,128) to fade in and out.

Learn more about gradients at W3 Schools.  (I do not know when gradient was introduced, but full support was available for IE starting at version 10 and Chrome at 26, for example.)

END for now ...