Cannot add HTML table to top of board pages

[dinoson2]

Forum URL: rpg-unlimited.boards.net/

Hello! I am having trouble adding a table to the top of my board pages.

I am trying to place, for example, a table like this one displayed our main page:



And add one just like it to our various board pages, like this one for example:

rpg-unlimited.boards.net/board/12/feudal-japan-samurai-spirits-naraku


I've tried various table codes, but it doesn't display correctly and always breaks for some reason when I place it in the headers. 

[Scott]

dinoson2, the area you highlighted in your image is created through the Global Messages plugin you have installed.

[dinoson2]

Jul 29, 2019 11:04:23 GMT -8 Scott said:

dinoson2 , the area you highlighted in your image is created through the Global Messages plugin you have installed.

Right, I'm aware of that. I'm just trying to create a separate HTML box that's a replica of that plugin's style to place on my board pages, but nothing seems to be working. 

[Scott]

dinoson2, you question is more suited for this board.

Now what code are you trying to use for your table?

Please post within [code][/code] tags.

[dinoson2]

Jul 29, 2019 11:17:10 GMT -8 Scott said:

dinoson2 , you question is more suited for this board.

Now what code are you trying to use for your table?

Please post within [code][/code] tags.

This one. I'm unsure if I even have the right kind of code, if I'm placing it in the wrong area, or I'm simply grossly overlooking a vital component to make it work. o.o;;;

<table width="250px" cellpadding="4" cellspacing="1" align="center" class="bordercolor">

<tr>

<td class="titlebg" width="100%" align="center">

<strong>Table Title</strong>

</td>

</tr>

<tr>

<td width="100%" class="windowbg2" vAlign="top" align="center">

Contents of Table Here

</td>

</tr>

</table>

[Scott]

dinoson2, for the most part the code looks ok for a basic table. The only thing I might change is since you are using a class for the the <td>, then other attributes like width and alignment should be defined in that class's CSS.


Though I should say I would recommend using div's over tables.

[dinoson2]

kay, I've been playing around with some code, and this is what I've come up with:


<table style="width:100%" cellpadding="4" class="bordercolor" cellspacing="4">

<tbody>

<tr>

<td>

<div class="container" >

<div class="title-bar"><h2>Title 1 goes here</h2></div>

<div class="content"><center><a href="https://imgur.com/MhcOVct"><img src="https://i.imgur.com/MhcOVct.jpg" title="source: imgur.com" /></center></a></div>

</div>

</td>

</tr>

</tbody>

</table>


And the result is this:



Now my question is how to adjust the padding above and below the image in the main box.

[Nscalerr 🐺]

A much better way of doing things would be to have the following and adding the CSS to the bottom of your stylesheet.

/* Title image. */
#naraku img {
   padding-top: 5px;
   padding-bottom: 5px;
}

<div class="container">
   <div class="title-bar"><h2>Title 1 goes here</h2></div>
   <div id="naraku" class="content" align="center">
       <a href="https://imgur.com/MhcOVct"><img src="https://i.imgur.com/MhcOVct.jpg" title="source: imgur.com" /></a>
   </div>
</div>

[dinoson2]

Aug 5, 2019 3:29:26 GMT -8 Nscalerr 🐺 said:

A much better way of doing things would be to have the following and adding the CSS to the bottom of your stylesheet.

/* Title image. */
#naraku img {
   padding-top: 5px;
   padding-bottom: 5px;
}

<div class="container">
   <div class="title-bar"><h2>Title 1 goes here</h2></div>
   <div id="naraku" class="content" align="center">
       <a href="https://imgur.com/MhcOVct"><img src="https://i.imgur.com/MhcOVct.jpg" title="source: imgur.com" /></a>
   </div>
</div>

That did it! Thank you both nscalerr and Scott for your assistance.