MySpace profile pages are arranged using six levels of HTML tables. Using Cascading Style Sheets, I specified that every table in my oreillytest MySpace profile should have a 10-pixel wide border. And, I specified a different color for each layer of table.

For example, for top level tables, I specified a red border. For a table inside a top level table, I specified an orange border. For tables inside the the second layer (orange) tables, I specified a yellow table. For the next three layers of tables, I specified lime, olive, and fuchsia borders.

Here's an example showing what this produces if we have six nested HTML tables:

The red box is the border of the top level table. The orange box is the border of the second-level table, which is created inside the top level table. The yellow box is the border of the third-level table, which is created inside the second-level (orange) table. And so on, with the lime, olive, and fuchsia tables.

The MySpace profile design is more complicated than this, in that the profile includes multiple tables inside a given exterior table in many instances. It's probably easiest to look at the MySpace table layers layout to see what I mean:

MySpace Profile Layout HTML Table Layers

What does this show us? It tells us that the MySpace profile page has 5 top level tables (the red boxes) and some of these top level tables have other tables layered inside them, while others don't. The most important top level table is the large one that contains all of the information that is unique to the user.

Knowing the layout of the MySpace profile table layers gives you the power to make all kinds of changes to your profile using Cascading Style Sheets (CSS). CSS lets you select elements within a MySpace page and define display properties for those elements. For example, I entered the following style sheet code into the "About Me" section of my oreillytest profile to generate the image displayed above:

Using CSS, you can easily apply display styles to a set of HTML elements (such as tables) or even to a particular HTML element within a page. You can add and remove borders, change the color of the interior of table layers, apply an image as a background for a specific layer of tables in your layout, or even for a specific table. You can even declare a layer of tables to be invisible (which will make all the tables inside those tables also invisible).

WARNING: under no circumstances should you make any change that removes the advertisement from the top of your profile page. If you do this, then your MySpace account will be DELETED.

The O'Reilly Network article Introduction to CSS Layout illustrates some techniques for using cascading style sheets for web page layout. For more detailed study, refer to the featured books, Head First HTML with CSS & XHTML and Learning Web Design, which provide everything you need to know if you'd like to really apply HTML and CSS to customize your MySpace page, or develop other web pages.

There is a lot more to discuss with regard to customizing your MySpace profile using CSS and HTML. But knowing how to navigate MySpace's nested tables layout structure is the starting point. More to come soon!