HTML Tables with CSS Styles
I've put together some common CSS tables styles so that you can quickly copy/paste the code for yourselves. You can modify the styles as you see fit.
They're 5 pretty basic css tables styles that are commonly used by web developers so I made this little mini-resource for quick copy and pasting styles.
I now also have a HTML table generator if you want to very quickly create a custom table and the required HTML and CSS code for it.
Hope this comes in handy.
Five Basic CSS Table Styles (Two Using Javascript)
Here is the code for a:
- Basic CSS styled table
- CSS table style with background images
- HTML table styled using CSS gradients
- Table with alternating row colors
- CSS table with row highlight on hover
1. CSS Table with One Pixel Borders
First up is the collapsed border table that has the solid line borders making this the basis for most popular table styles.
The code includes the CSS which you can add to your stylesheet and please note a class has been added to the table tag.
Info Header 1 | Info Header 2 | Info Header 3 |
---|---|---|
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
Copy/Paste Code for CSS Table with One Pixel Borders
2. CSS Table with Background Images
This image approach is a little old school but it may still come in handy once in a while. If you're looking for a more modern approach, then check out the CSS Table Gradient example below.
This table is similar to the one above except it uses background images which allows the table cells to have a subtle color gradation in them. The images also have a one pixel white line on the left and top which gives the cells a slight 3D effect.
You'll probably have to make two small changes to the CSS to reflect where the table images live on your server other than that it's fairly straightforward.
Info Header 1 | Info Header 2 | Info Header 3 |
---|---|---|
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
Step 1. Download a zip of the table images (code included) or right click and save these two images to your desktop: cell-blue.jpg and cell-grey.jpg
Step 2. Copy the code in the box below. Remember to change the css image location. The table tag requires a class.
3. HTML Table using CSS Gradients
This one is a more modern version of the image one - it uses CSS gradients to achieve the bevelled look of the image table example. It's a completely image free table rendering.
This code will display correctly across all modern browsers even Internet Explorer 9. It's not pixel perfect in Internet Explorer 7 or 8 but it's a good enough rendering and doesn't impare legibility.
Copy/Paste Code for CSS Gradient Table
4. CSS Table with Automatically Alternating Rows (Requires Javascript)
This CSS table uses Javascript to automatically alternate row colors. This is especially great if you have a large table that gets updated frequently.
You can now also achieve this effect in CSS for all the modern browsers. Learn more about using CSS to make a table with alternating rows.
Info Header 1 | Info Header 2 | Info Header 3 |
---|---|---|
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
Text 3A | Text 3B | Text 3C |
Text 4A | Text 4B | Text 4C |
Text 5A | Text 5B | Text 5C |
Instructions
5. CSS Table with Highlight Row on Hover (Requires Javascript)
Nowadays I just use CSS for this so you should probably go read about how to highlight a table row using CSS.
Otherwise the code below highlights a table row using Javascript which I wouldn't advise you to normally use unless you either must provide support for IE6 (in which case you have my sympathy) or you have to work on a web page without a doctype. HTML pages created without doctypes will prevent a pure CSS solution for table row highlighting from working on all versions of Internet Explorer.
But seriously, go check out the CSS hover solution first - it's a much better method.
Info Header 1 | Info Header 2 | Info Header 3 |
---|---|---|
Item 1A | Item 1B | Item 1C |
Item 2A | Item 2B | Item 2C |
Item 3A | Item 3B | Item 3C |
Item 4A | Item 4B | Item 4C |
Item 5A | Item 5B | Item 5C |
One thing to note is you should make sure not to define the background color of a table cell in your stylesheet as that'll stop the row highlight code from working properly.
These 5 table styles are variants of the five most common types of tables that I usually have to create so hopefully you'll find them helpful.
Most Popular Text Tools
- Remove Line Breaks: Remove unwanted line breaks from your text.
- Random Word Generator: Generate a list of random words. Great tool for brainstorming ideas.
- Alphabetical Order: Alphabetize all sorts of text content with this tool.
- Text to HTML: Automatically change plain text into HTML paragraphs.
- HTML to Text: Remove all HTML tags, leaving only text content.
- Online Sentence Counter: Quickly count the number of sentences in your content.
- Random Choice Generator: Randomly pick a choice from a list of options.
- Reverse Text Generator: Create social media posts or any text in reverse text.
- Remove Duplicate Lines: Remove all of the identical lines in your content.
- Paragraph to Single Line: Convert any multiple paragraphs to a single line.
Alphabetical Tools
Random Generators
- Random Word Generator
- Random Sentence Generator
- Random Noun Generator
- Random Adjectives Generator
- Random String Generator
- Random Letter Generator
- Random Decision Maker
- Random Number Generator
- Random Password Generator
- Random Choice Generator
Line Break Tools
Fun Text Tools
- Reverse Text
- Fake Word Generator
- Repeat Text Generator
- Tiny Text Generator
- Cursive Text Generator
- Bold Text Generator
Text Changing Tools
- Capitalize the First letter of Sentences
- Uppercase or Lowercase Text
- Remove Spaces Online
- Capitalize Each Word
- Remove Numbers from Text
SEO and Word Tools
- Word Counter
- Sentence Counter Online
- Character Counter
- Title Capitalization Tool
- Meta Description Length Checker
Content Conversion Tools
- Convert a Word Doc to HTML
- Convert Word Doc to Text
- Convert Plain Text to HTML
- Convert URLs to HTML Links
- Convert CSV Text to HTML Table
- HTML to Text
HTML Code Generators
- HTML Table Generator
- HTML List Generator
- HTML Text Generator
- Javascript Pop-up Window Maker
- Email HTML Code
- Remove HTML Tags