opinion

Designing Tables Using CSS



Are you paying attention? That’s kind of a trick title, isn’t it? True “table” formations created today using Cascading Style Sheets (CSS) aren’t really tables at all...

But the effect is the same, so for all intents and purposes for the remainder of this article we will refer to them as tables – but you will know that they aren’t the old-fashioned nested things that used to cause webmasters to pull their hair out. We are talking about the “tables” of today – tables designed using CSS.

Why Are Old Fashioned Tables So Bad?

The folks over at HotDesign.com seem to really hate tables – in fact, in their article titled, “Why Tables for Layout is Stupid,” they say:

"Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich websites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web."

In the article the author goes on to state that using style sheets instead of tables will make your pages load faster, lower your hosting costs (not much – that one’s stretching it a bit), make your re-designs more efficient, help maintain visual consistency throughout your sites, get you better search engine results, make your sites more accessible to all viewers and give you a competitive edge as the world moves to Web standards. Wow – that’s a lot to expect from CSS. But CSS is the “little engine that could” for Web developers – it can do practically anything!

How It Works

To use CSS layouts instead of tables you should really have a basic understanding of CSS. It also doesn’t hurt to get a better understanding of the how and why behind style sheets, what they were created to do – and why using CSS is so much better than anything you’ve ever used in the past. Style sheets are based upon the concept of “absolute positioning.” What that means is that every single element is perceived as a unique entry that can be specifically – and absolutely – placed anywhere on the page in relation to its edges.

The most efficient way to accomplish this “absolute positioning” is with the use of div boxes. Important: you should always remember margins and stack order of the div boxes. The margins can be set in relation to the edges of the page – vertically and horizontally. The stack order of the div boxes allows overlapping – or if you so choose – prevents overlapping, allowing you to hide part of a div box, placing something else on top instead.

The stack order translates to z-index number. Unfortunately, that is the CSS command that is most difficult for users to grasp. There is an excellent illustration at HTML.net that may help you to better understand what the z-index number is and how it works [https://www.html.net/tutorials/css/lesson15.asp]. Once you understand how it works you will discover that there are many, many ways that you can use CSS to create virtually any layout.

The Basic Layout

The basic layout – sans tables – typically consists of a header, navigation (typically a sidebar) and the main section – the content. You should create a different div box for each one – that will help you with positioning, organization and control of your page’s layout. These three basic areas can be located anywhere on a page – that’s where your own creativity comes in. Sure the header could be at the top, the navigation could be on the left in a sidebar and the content could be to the right – a typical average page. But you can shake things up – move the header anywhere you want - and the navigation doesn’t have to be a sidebar, it could be a top toolbar, a specially placed section to help your visitors move around your site. And the content, it could be the whole width of the page – next to the “header” (which doesn’t always have to be at the top) – or anywhere at all.

However, the key things that you have to know and must remember are:

1. Position within the page (margins to the edges of the page).
2. Position relative to other elements (i.e. where the header is in relation to the content, and where the content is in relation to the navigation, etc.).
3. Size (the height and width of everything).
4. Importance (the order of appearance of the areas within the source code).

So the basic div structure of the layout would look like this:


Header

Navigation

Content




That doesn’t really tell you much right off the bat – in fact, this is about as basic as you can get. In order to create your own layout – with the heights, widths, header/navigation locations, size of the content area, etc. that you want – you will need to do a lot of tweaking. Remember – the key phrase here is “absolute positioning” – so your directions will have to be absolute!

Before we begin to build our CSS layout, however we will need some facts. Remember – you need to know the size and the location of everything. Get all that information together and putting it all into the CSS file will be easy. For the sake of argument the information for our sample CSS layout will be:

Content Area – width 500 pixels
Navigation Area – width 200 pixels
Header Area/Image – width 700 pixels, height 100 pixels


Tweaking the Layout

Let’s get the layout started with the content div box – typically your content is the most important. It isn’t listed “first” in your markup (see above div boxes) – but in your CSS file you can put it in whatever order is most important to you, your organization and your site.

To place each div within the HTML of your Web page you will use the following tags:

Header
Navigation
Content



Remember – we are starting with content – so the style sheet reference for the “content” box is listed below:

div.content {
position: absolute;
margin: 100px, 0px, 0px, 200px;
width: 500 px;
z-index: 1;
}


What all of this means is that the “position” and markup of “absolute” shows that the box is positioned “absolutely” to the “edges” of the document. The “margin” indicates where the content box is located within the document – which in this case is 100px from the top and 200px inside the document’s edges and goes all the way to the edges (the 0px) of the other sides of the document. The “margin” is always set in clock-wise order in relation to the top, right, bottom and left of the page. The “width” of the content box is as we designated above – 500px wide – and the z-index sets the stack order of the div boxes showing that the content box will be positioned underneath any other box with a higher z-index.

The next section will be the navigation – also a very important element in this layout design. Because our navigation is of the typical “sidebar” variety and is located alongside the content div box, we will include some references that are similar to the ones in the content box:

div.navigation {
position: absolute;
margin: 100px, 500px, 0px, 0px;
width: 200px;
z-index: 2;
}


Again, “position” is “absolute,” but this time the margin is set to show, as with the content – to be 100px from the top. But this time the margin is 0px for the left because it is on the left side, flush with the page’s edge – and 500px to the right, to allow for the 500px wide content area. Width of the navigation box is 200px – and the z-index is 2 in order of overlapping or positioning pecking order.

The final section that we will be going over is the header – not nearly as important as either the content or the navigation – this section can be listed in pecking order or in order of visibility – again, dependent upon the personal preferences of the Web developer.

div.header {
position: absolute;
margin: 0px;
width: 700px;
height: 100px;
z-index: 3;
}


And once again “position” is absolute – but this time the margin markup is just 0px – if it is 0px all around, you can list it as 0px and it will be sufficient. It is not necessary to denote all four sides in this case – it is assumed that 0px translates to 0px, 0px, 0px, 0px. The width – and this time also the height – are marked as indicated previously – 700 pixels wide and 100 pixels high. The z-index order is 3 – overlapping both the content and navigation boxes if necessary.

Testing 1… 2… 3…

It is very important to test your new CSS layout in multiple browsers before moving on and deciding that your new look will do its job. Unfortunately the issue of browser compatibility could fill another entire article - all by itself – so we will try to keep this brief and to the point.

Test first with the “usual suspects” – Microsoft Internet Explorer, Mozilla/Firefox, Opera and Netscape. Test first with the latest versions of these browsers – working on the assumption that most people update their browsers with regularity and that you will see the average screen view when using these “big guys” of the browser world.

Next you should use older browser versions for your testing. If you do not have an older version there are online programs, Web-based browser compatibility checkers and viewers that you can use to get the job done. In most cases, it won’t be compliant – but check your stats – how many of your regular site visitors or what percentage of your unique traffic actually even uses these old fossils anymore? Before you panic > research > that’s always the best way.

Check for horizontal scroll bars – especially in the 800x600 resolution – just to see how those out-of-the-box never-ever-tweak-the-default-settings surfers will view your new page. Check to see that all div boxes, image backgrounds and other settings are displaying properly. Older browsers – like Netscape 4.x – will typically not properly display: the “float” property, images in paragraphs, lists’ margins and paddings, white space in the source code between images or background images.

When checking in text-only browsers you will see that elements such as navigation and sometimes the header are pushed to the bottom of the page following the content. While this can create some layout issues and concerns about how the page will be navigated, look around – in most cases the page is still readable, usable and understandable.

Will You Use CSS Layouts in Your Next Project?

Now that you have a basic understanding of how CSS layouts can work in place of tables in a Web page – will you be trying them out in your next project? Don’t let all these new ideas and new functions scare you off – it’s totally worth the time and effort you will be putting into changing the way you display your content.

Happy developing! Please share your experiences using CSS layouts in your new Web page designs – and ask for help!

Copyright © 2025 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

opinion

What France's New Law Means for Age Verification Worldwide

When France implemented its Security and Regulation of the Digital Space (SREN) law on April 11, it marked a pivotal moment in the ongoing global debate surrounding online safety and access to adult content.

Corey D. Silverstein ·
opinion

How Adult Retailers Can Enhance Sales With Supplements

The supplement industry is big business. In 2024, Future Market Insights estimated it to be valued at $74.3 billion, and other market research firms anticipate that number will grow to upwards of $170 billion in just 10 years.

Rick Magana ·
opinion

From Tariffs to Trends: Staying Resilient in a Shaky Online Adult Market

Whenever I check in with clients these days, I encounter the same concerns. For many, business has not quite bounced back after the typical post-holiday-season slowdown. Instead, consumers have been holding back due to the economic uncertainty around the Trump administration’s new tariffs and their impact on prices.

Cathy Beardsley ·
opinion

Why It's Time the Pleasure Industry Got Serious About IPX Waterproof Ratings

As someone who regularly communicates with manufacturers, retailers and consumers, I’ve seen how this ambiguity can do a disservice to both the customers who use these products and the businesses that sell them.

Alicia Sinclair Rosen ·
opinion

Optimizing Payment Strategies for High Ticket Sales

Payment processing for more expensive items, such as those exceeding $1,000 per order, can create unique challenges. For adult businesses, those challenges are magnified. Increased fraud risk, elevated chargeback ratios and heavier scrutiny from banks and processors are only the beginning.

Jonathan Corona ·
opinion

Tips for Sexual Wellness Brands to Win Over Gen Z This Summer

As summer rolls around, the excitement in the air is palpable, especially for one particular demographic: Gen Z. College and university classes are over, vacations are booked and it’s time to let loose.

Naima Karp ·
opinion

The Barcelona Job: A Diamond Heist Drenched in Sweat and Seduction

In a city famed for its architecture and allure, something far more seductive is about to go down. The priceless NakedSword Diamond is nestled deep within a heavily fortified Barcelona museum, and master thief Sir Peter has his eye on the prize.

Jackie Backman ·
opinion

Celebrating the LGBTQ+ Community With Inclusive Packaging Design

Pride Month is a time of visibility, joy and self-expression. In the pleasure industry, projecting that energy can start with something as simple as a box. Market research shows that 72% of U.S. consumers say product packaging influences their purchasing decisions.

Matthew Spindler ·
profile

Sara Loverays on Tapping Her Goddess Energy

When Sara Loverays first turned on her webcam, she didn’t know it would change her life — or unlock a side of herself she’d been waiting to set free. What began as a way to make extra cash between travel physical therapy contracts soon became her full-time passion, a platform for self-discovery, and a ticket to building her own brand based on sensuality, self-discovery and “goddess energy.”

Jackie Backman ·
profile

WIA Profile: Pettus Ashley

Pettus Ashley brings her A game to the world of authentic adult branding, flitting between airports as the American face of U.K. brand Bathmate. As a company brand ambassador, Ashley personifies Bathmate’s dedication to the retail world, showering staff with equal amounts of appreciation and sales education.

Women In Adult ·
Show More