CSS3, HTML, HTML5, Programming

Using CSS to Style Table Columns by Numeric Position

CSS Table Styling
CSS Table Styling

In case the title of this article is confusing, what I’m trying to show is how to use CSS to change only the style of a particular column of an HTML table… so, for example, how to center-align the contents of the second table column.

Continue reading “Using CSS to Style Table Columns by Numeric Position”

Advertisements
CSS3, HTML, HTML5, JavaScript, JQuery, Programming

JavaScript: Outputting a Number in Traditional Currency Format

The requirements I will describe in this article are to have JavaScript format user-input numbers as traditional currency. This means to show two decimal places (with or without automatic rounding), commas as thousands separators, and with or without a preceding currency symbol like:

$ 12,345.67

or without the currency sign as:

12,345.67

Continue reading “JavaScript: Outputting a Number in Traditional Currency Format”

CSS3, HTML, HTML5, JavaScript, JQuery, Programming, Regular Expressions

Tips: Get your Web Forms Money Fields Looking Great with jQuery, Bootstrap3 and FontAwesome

Formatted Number Fields
Formatted Number Fields

Here is a quick overview of how to make number fields in your HTML form look more fancy using Bootstrap3 and jQuery. In particular I will show how to use Bootstrap markup to prepend a Bootstrap icon to one of the text input field on your form. Also I’ll show how to add a jQuery/JavaScript function to nicely format the numbers entered by your users.

In the end the example number fields will look a little something like the image shown here. If you want to try this for yourself, just browse a little further down in this article for a full working HTML example page.

Having nicely formatted number fields in your Web form is an example of how making things look much friendlier and professional, which is definitely a good thing!

Continue reading “Tips: Get your Web Forms Money Fields Looking Great with jQuery, Bootstrap3 and FontAwesome”