How do I make this table with HTML?

**n3v3rl4nd** · Jan 4, 2007 22:54

How do I duplicate this in HTML? I want to add the bbcode to my forum for the off topic. Its not working right.

Exmaple:

Off Topic:

I want to make this with HTML

I tried but all I can make is a table with two lines, and it doesn't look the same.

Thanks.

**Dan Schulz** · Jan 5, 2007 00:18

What code are you trying to use?

(Waiting on a staff member to approve your .jpg file)

**Raffles** · Jan 5, 2007 01:50

You can use a paragraph.

HTML Code:

<p class="offtopic">Off Topic:<br><br>
I want to make this with HTML</p>

Then in the CSS:

Code:

p.offtopic {
  border:3px double yellow;
  padding:20px;
  font:0.8em Verdana, sans-serif;
}

**AaronM** · Jan 5, 2007 08:52

if you want to accomplish this with a table use this

Code:

td.offtopic{
   border-collapse:collapse
}

and that should show the border of the table sell as a solid border.

However, it would be better to use a div or paragraph to accomplish this the way Raffles suggests.

**n3v3rl4nd** · Jan 5, 2007 10:50

I don't think I can use CSS I am trying to add this as a custom bbcode from the cp of vbulletin. So people can type

Off Topic:

some text

on my forum and it makes that box like this website does.

**Raffles** · Jan 5, 2007 12:13

If you look at the source, you'll see the box is a div with class "sepquote". I'm pretty sure you could do it with a paragraph and then add the relevant CSS to the template's main stylesheet. And if for whatever reason this isn't possible, there are still inline styles:

HTML Code:

<div style="border:3px double yellow; padding:20px; font:0.8em Verdana, sans-serif;">Off Topic:<br><br>eoifbnioasnb</div>

**n3v3rl4nd** · Jan 5, 2007 12:51

I know you can add CSS to the main template from the admin cp, but I don't know if it will work for custom bbcode. I will ask on vb website.

I had to modify it a little bit because I wanted the words "off topic" to be smaller then the actual text from the post. Can you check and make sure its still correct. I'm not sure about all the standards and proper ways to do things with web pages. I am only a windows programmer.

Code:

<html>
<head><title></title></head>
<body>
<div style="border:1px double orange; padding:20px; font:0.8em Verdana;"><font size="1px">Off 

Topic:</font><br><br>This is the real text.</div>
</body>
</html>

**n3v3rl4nd** · Jan 5, 2007 13:33

Originally Posted by Dan Schulz

What code are you trying to use?

(Waiting on a staff member to approve your .jpg file)

I dont remember what the code was. It didnt work so I deleted it. But the images shows what it did.

Its working now. As long as my modifications are going to work on all the browsers.

Here is my final code

Code:

<html>
<head><title></title></head>
<body>
<div style="border:1px double orange; padding:20px; Verdana;"><font size="1px">Off Topic:</font><br><br>This is the real text.</div>
</body>
</html>

What does the double word mean? And I took out some san serf font and added a font tag. I think it will work.

**Dan Schulz** · Jan 6, 2007 01:32

It means you're using a double border.

That style rule is also invalid. Try this instead:

Code:

border: 1px double orange; padding: 20px; font-family: Verdana, sans-serif;

Then in your HTML, add a span around the words "Off Topic" and style it with your font-size setting:

HTML Code:

<span class="off-topic" style="font-size: 1px;">Off Topic: </span>

(This also allows you to get rid of the depreciated font tags.)

Oh, and don't forget to use a proper and valid DOCTYPE and call your CSS from an external stylesheet instead of in-lining it.

**n3v3rl4nd** · Jan 6, 2007 13:52

That code doesnt work can you please post the exact code that goes in the additional css box, and the code that goes in the bbcode manager replacement box.

it only works when i use the inline style.

User Tag List

Thread: How do I make this table with HTML?

Thread Tools

Display

How do I make this table with HTML?

Bookmarks

Bookmarks

Posting Permissions