[Somewhat Urgent] Does Anyone Know How To Do This?

[Storm]

So, I've seen a lot of sites with adorable little tables in their side-boxes like this, and I REALLY want to learn and know how to make tables like those.

So, PLEASE, if anyone could be so kind as to taking a few moments out of their time to give me a detailed explanation and help me through this, I would very much appreciate it! c:

[NetMaster]

Well the first step is to use the code: Smangi's Side Tables.

Then the effects can be achieved using CSS.

[Storm]

I know that... -_- I'm using Smangii's tables already. I just don't know where to learn how to make UBBC/HTML tables like those.

[Bennett 🚀]

The CSS for that would be something like this:

.liltables {
background-color: #BGCOLOR;
border-left: 3px solid #BORDERLEFT;
border-top: 1px dashed #BORDERTOP;
border-bottom: 1px dashed #BORDERBOTTOM;
}


just put in a <p class="liltables">CONTENT</p> in your side tables for whatever, after you're done editing the css

[Storm]

Thanks! But see, when I try to put it in text where it has a scrollbar, it wouldn't work. And it seems like I can't put it behind images either.

[NetMaster]

Try targeting the tables themselves instead of a <p> tag.
You can change the CSS coding for #sidetables
Just be sure to remove the classes of the td's.

<td class="titlebg">
<td class="windowbg">

As these will over-ride the table styles.

[Storm]

What do you mean by removing the classes of the td's? You mean, remove every td tags in every table?

[NetMaster]

No. Let me explain:

The side tables are set up like so:


<table id="sidetables">
<tr>
<td class="titlebg">Title of Table</td>
</tr>
<tr>
<td class="windowbg"><p class="liltables">Body of Table</p></td>
</tr>
</table>


My suggestion is to use CSS to modify the table as a whole instead of putting in the <p> tags. However the td classes would over-ride the css of the table as a whole. So if you go through just your side tables and delete the classes from the TD's then you can use the following css:

#sidetables { }

Which is already included in the Smanji's Side Table code.

[Storm]

So I remove the classes and keep the <p> tags?

[NetMaster]

No you can remove the p tag too. Unless you want to add text specific styling.

[Bennett 🚀]

If you still want a bg behind the text, i'd suggest just putting the <p> tags in But if you just want the boxes, then yeah, do what NetMaster says.

[Storm]

It didn't work. When I removed the td class and the <p> tags, it didn't do anything.

[ebramble]

Has this been rectified for you Storm. What URL can I see your site? I too am having difficulties with the side bar/boxes.

[Tumbleweed]

Here is an example of what you can do with css just to get you started. I left my images in there so you can see what does what.

The css:

<style type="text/css">
#sidetables { width: 200px; margin-bottom: 20px; margin-right: 20px; background-image:url(http://i56.tinypic.com/muzwpu.jpg); background-repeat:repeat;  border: 2px solid #000000;
}
#my_titles{background-image:url(http://i51.tinypic.com/9ubxo8.jpg);background-repeat: repeat; padding: 8px; margin: 10px; border: 2px solid #000000; font-family:"georgia"; font-size: 1.2em; font-weight: bold; font-style: italic; color: #1d751e; display: block;
}
#my_content{background-image:url(http://i51.tinypic.com/9ubxo8.jpg);background-repeat: repeat; padding: 8px; margin: 10px; border: 2px solid #000000; text-align: justify;
}
#inner_content{border-left: 4px solid #1d751e; padding-left: 4px;
}
</style>


The side table:



<!-- ===== BOX #2 START ===== -->
<table id="sidetables" cellpadding="0" cellspacing="1">
<tr>
<td align="center">
<span id="my_titles">My Title Here</span>
</td>
</tr>
<tr>
<td width="100%">
<div id="my_content">
<div id="inner_content">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>
</div>
</td>
</tr>
</table>


To create your own styles the only place you should go is W3 Schools. On the right you'll see "CSS Basic", "CSS Styling" and "CSS Box Model". Those are the three you should use to start out the learning process and how to style your own unique side tables.