Create a Slick Features Table in HTML & CSS

We’ve all grown up as web designers staying well away from table based layouts, but we don’t often brush up on our table building skills ready for when we will actually need them. Follow this step by step tutorial to create a slick looking data table to compare the features of various Harley Davidson motorcycles. We’ll build the table in clean HTML then polish it up with CSS to create a cool and easily readable HTML table.

The table we’ll be building compares a bunch of features between three Harley Davidson Sportster motorcycle models. Other than the slick design we’re putting together for the sake of this demo, the table will be built with clean HTML then styled with CSS to make the data easily readable.

View the final HTML/CSS features table

For the design of this particular demo there’s a few files we need from my original PSD concept. These include a patterned PNG graphic we’ll use as a background, the large black and white photo to fill up the demo background, the Harley Davidson logo and photos of the three bike models we’re comparing.

The demo file begins with a typical HTML structure including Doctype, page title and a link to the CSS stylesheet. The page content begins with a

, which will later be converted to the HD logo, then a container div is added to help house and centre up the content.

Next the

element is inserted, followed by a to outline the titles and headings in our table. The contains two rows, one with the bike photos and the second with titles of each model in

tags. The overall table has three columns, but the first cells in the header are empty so a character is added. To help us style the table and aid the readability of the table data while in code view relevant classes are added to the cells.

After the closing of the the begins. Where elements are used in the , elements are used in the . Each series of cells is contained within a row, and our classes help identify the different columns. All the rows of data are added to finish off the HTML.




Harley Davidson Sportster Motorcycle Model Comparison








Harley Davidson Motorcycles

 
 
  

     
    
    
    
   

     
    
Iron 883

    
Nightster

    
Forty-Eight

   

  
  

    Engine
    883cc
    1202cc
    1202cc
   

    Torque
    70Nm
    98Nm
    98Nm
   

    Exhaust
    Chrome, staggered shorty exhaust with dual mufflers
    Chrome, slash-cut exhaust with dual mufflers
    Chrome, staggered shorty exhaust with dual slash-cut mufflers
   

    Wheels
    Black, 13-Spoke Cast Aluminum
    Black, Laced Steel
    Black, Laced Steel
   

    Ground Clearance
    120mm
    130mm
    100mm
   

    Price
    £6,699
    £8,099
    £8,849


Engine	883cc	1202cc	1202cc
Torque	70Nm	98Nm	98Nm
Exhaust	Chrome, staggered shorty exhaust with dual mufflers	Chrome, slash-cut exhaust with dual mufflers	Chrome, staggered shorty exhaust with dual slash-cut mufflers
Wheels	Black, 13-Spoke Cast Aluminum	Black, Laced Steel	Black, Laced Steel
Ground Clearance	120mm	130mm	100mm
Price	£6,699	£8,099	£8,849

The CSS begins with a simple CSS to remove any default browser styling, then the global styling for this particular demo file is set up. The large background image is added to the page body and overall font styling set up as 16px Georgia in grey.

The

element is then converted to the Harley Davidson logo using the image replacement technique, then the container div is styled to sit centrally on the page. The patterned background image is used as a fill and a CSS3 box-shadow is created to replicate the Photoshop drop shadow effect.

By default the table displays with small gaps between the table cells. Our design requires a kind of margin between the columns but no gaps between the rows. The border-spacing property allows us to designate an exact amount of spacing on both the Y and X axis. Padding is added and text centred on all and elements, then this is overwritten for the cells with the class “feature”, sending the text back to left alignment. These cells are also given an exact width to alter the proportions of the table, making this column the largest.

Our classes of “iron”, “nightster” and “fortyeight” are all given a background fill of transparent white using RGBa colour selection. We could have used a single class for all these cells, but the name specific classes help us navigate the table data while in code view. To add a finishing touch to the table, the same transparent fill is also added to table rows, but only when they’re hovered by the user’s mouse. This simple effect boosts the usability of the table, helping the user easily cross reference and compare the data.

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote, table, tr, td, th {
 margin: 0; padding: 0; border: 0;
}

body {
 background: #000 url(images/bg.jpg) center top fixed no-repeat;
 font: 16px Georgia, Serif; color: #ccc;
}

h1 {
 width: 168px; height: 130px; margin: 30px auto; position: relative;
 background: url(images/harley-davidson.png); text-indent: -9999px;
}

#container {
 width: 940px; margin: -115px auto; padding: 110px 10px 50px 10px;
 background: url(images/bg-pattern.png);
 box-shadow: 0px 0px 15px #000;
}

table {
 border-spacing: 10px 0px;
}

th, td {
 text-align: center; padding: 10px;
}

.feature {
 width: 183px; text-align: right;
 font-size: 24px; font-weight: normal; color: #fff; 
}

.iron, .nightster, .fortyeight {
 background: rgba(255,255,255,0.05);
}

h2 {
 font-size: 24px; font-weight: normal; color: #fff; 
}

tr:hover {
 background: rgba(255,255,255,0.05);
}
 thead tr:hover {
  background: none;
 }

Check out the complete demo file to see the feature table in action with its hover effect. The use of transparency from the PNG24 files and RGBa colouring really helps create a sleek design when combined with the large background image. Overall these simple table styling techniques can be used on any project to display your tabular data in a readable and easily digestible manner.

View the feature table demo