mySpace userProfileDetail Details Detail Table

Here is a picture of the table, showing the table structure, classes, and other features which can be used to address the table and items within it.

Table (No Class) table.userProfileDetail td (no class) td.text td.tdborder span.text span.whitetext12 span.lightbluetext8

Because the myspace code changes frequently, and it is difficult for me to keep these diagrams up to date, please refer to the following myspace page:
MySpace Page with Style Added to Show Layering and Classes

The simple stuff:
Hiding the entire Details Table (and removing space it occupied)
Insert this code anywhere EXCEPT within another style block. The style tags are included. If you are not sure where to insert this code, place it at the END of your about me section (the very end, after everything):

<style>
table.userProfileDetail {display:none}
</style>

If you want to hide the table, and NOT remove the space it occupies, replace the {display:none} with {visibility:hidden}

There is a carriage return between each table.
Removing a table with {display:none} removes all the space the table occupied, but does not remove the carriage return(s) between the tables.

I usually first set the carriage return height, since it varies from platform to platform.
If I have kept my interests table, and I want to remove my detail table AND the carriage return I do this:

<style>
table.userProfileDetail {display:none}
table table br {line-height:13px;}
table.interestsAndDetails {margin-bottom:-13px;}
</style>

MISSING Carriage Return: Myspace has removed the carriage return which was between the detail and school tables.
I guess you can add a margin Bottom to the Details Table like this:

<style>
table.userProfileDetail {margin-bottom:13px}
</style>

A few months ago an additional table row and cell showed up at the top of the interests table.
The default myspace code is not structured correctly, and the side effect is this extra table cell causing whitespace between the table header and the detail data..
I expect this to go away at some time.
But for now, if you want to eliminate it, you can do so by moving up the inner table.
This is the table show with the solid hotpink border in the above diagram.
The distance is not exactly the same in FF as it is in IE (same resolution/dpi).
But it is close enough.

<style>
{!- eliminate extra whitespace near top of detail table -!}
{!- remove this line when the bug goes away and you notice overlap -}
table.userProfileDetail table {background-color:transparent; position:relative; top:-10px; margin-bottom:-10px; _top:-5px; _margin-bottom:-5px}
</style>

This will probably change, so if you notice that the top of your details, is overlapping your header, take the above block out.

You may, at some point, notice that the fonts in your detail table have changed over night. I highly suspect that they are going to put a span of class text in here.
They already have one in the code.
But due to the poor structure of the code, the span class text only effects the empty extra cell just under the header (the one the above code block hides).

Setting Color and Fonts
The first thing I do is remove all of the default coloring.
Then I just add the color I want.

The following diagram shows several colors and fonts. If you see something on the image, which I have in YELLOW, and you want it a different color, then change the YELLOW in my code the color you want.
Do the same for the other colors and fonts you see in the below code block, to create a block that works on your page:

<style>
{! remove default color and borders !}
table.userProfileDetail, table.userProfileDetail table, table.userProfileDetail td {background-color:transparent !important; border:0px !important;}

{! background to table !}
table.userProfileDetail {background-color:yellow !important; }

{! if you want to collapse borders !}
table.userProfileDetail table {border-collapse:collapse}

{! border to table !}
table.userProfileDetail {border:3px solid !important; border-color:pink !important;}

{! style row headers !}
table.userProfileDetail span.lightbluetext8 {color:darkgreen ; font-weight:bold; font-family:comic sans ms; font-size:15px;}

{! style table header !}
table.userProfileDetail td span.whitetext12 {color:silver; font-size:20px !important; font-family:arial !important; font-weight:bold;}

{! style row data !}
table.userProfileDetail table td  {color:hotpink !important; font-size:13px; font-family:courier new;}

{! style row data which is also a link !}
table.userProfileDetail table td a {color:maroon !important; font-size:12px; font-family:arial black;}
</style>

I had borders for the inside cells, with the data. However, since myspace added that extra cell (due to a code bug) it looked tacky.
However, if combined with my code to crunch the extra cell it does not look so bad.



Creating a Custom Detail Table
You can create a custom detail table, by hiding this table, and then creating a custom table under your interests table.
Code:

<span class="off">START Create Custom Interests Table</span>
</td></tr></table>
</td></tr></table>
<span class="off">--!Begin CUSTOM Table!--</span>
<br>
<table class="MyDetails" style="width:300px">
<tr>
<td valign="middle" align="left" colspan="2" style="width:100%"> 
My Details
</td>
</tr>
<span class="off">--!Begin Data Column!--</span>
<tr>
<td valign="top" align="left" style="width:80px;" >
HEADING 1   
</td>
<td  style="width:220px;" >
DATA 1
</td>
</tr>
<span class="off">^^!END Data Column 1!^^</span>

<span class="off">--!Begin Data Column 2!--</span>
<tr>
<td valign="top" align="left" style="width:80px">
HEADING 2  </span>
</td>
<td  style="width:220px" >
DATA 2
</td>
</tr>
<span class="off">^^!END Data Column!^^</span>

</table>
<span class="off">^^!CLOSE Custom Table!^^</span>
<table style="display:none"><tr><td>
<table><tr><td>

<span class="off">!-start STYLE block to go with Custom Detail Table -!</span>
<style>
{!- hide default Detail Table -!}
table.userProfileDetail {display:none}
{!- Borders and Background. Change Colors or other Style -!}
table.myDetails {border:2px blue solid; background-color:lightblue; border-collapse: collapse;}
table.myDetails td {border:2px white solid; }
</style>
<span class="off">END Create Custom Interests Table</span>

If you have groups, and you want to bring those back, you have to manually add the code to do so.
You can add this BEFORE the block to create the custom details table, within the same section in your interests table.
Skem 9, Bring Back Groups