Looking for a table...

[Former Member]

Hello, I used to be on PB years ago but kind of fell away. I'm looking for a table that I used to use that I really loved. It had 6 total cells. There was the title bar across the top and then below that there were 3 columns. The left and right columns were two cells stacked and the center cell was just one big cell. Anyone get what I'm saying?

[Tumbleweed]

Jun 26, 2016 7:24:41 GMT -8 @dlsheer2010 said:

Hello, I used to be on PB years ago but kind of fell away. I'm looking for a table that I used to use that I really loved. It had 6 total cells. There was the title bar across the top and then below that there were 3 columns. The left and right columns were two cells stacked and the center cell was just one big cell. Anyone get what I'm saying?

Here is a bare bones table like you described but you'll have to style it to make it pretty:



<style>
#sample_table7{
width:800px;
margin:auto;
}
#sample_table7 td{
width:33%;
padding:10px;
color:#7436ae;
border:1px solid #0000ff;
}
td#title_7{font-size:12px; color:red;
}
</style>

<table id="sample_table7">
<tr>
<td id="title_7" colspan="3">Title</td>
</tr>
<tr>
<td>column 1 row 1</td>
<td rowspan="2">
This spans two rows
</td>
<td>column 3 row 1</td>
</tr>
<tr>
<td>column 1 row 2</td>
<td>column 3 row 2</td>
</tr>
</table>





[Former Member]

Thank you Tumbleweed! ^_^

EDIT: How do I adjust column width?

[Tumbleweed]

Jun 26, 2016 8:49:59 GMT -8 @dlsheer2010 said:

Thank you Tumbleweed! ^_^

EDIT: How do I adjust column width?

You can add classes/id's to it, like I did below: (I do want to say, when I tried it on my ProBoards test site and I tried two different tests sites, it didn't work so I threw it on a fiddle and it works there so I don't know why it isn't working on my test sites but hopefully it'll work for you.  If it doesn't, I posted a more updated version using divs below the table code.



<style>
#sample_table7{background-color:gray;
width:100%;
margin:auto;
}
#sample_table7 td{
padding:10px;
color:#7436ae;
border:1px solid #0000ff;
}
.title_7{width:100%;font-size:12px; color:red;
}
.first_col{width:20%;
}
.sec_col{width:60%;
}
#thir_col{width:20%;
}
</style>

<table id="sample_table7">
<tbody>
<tr>
<td id="title_7" colspan="3">Title</td>
</tr>
<tr>
<td class="first_col">column 1 row 1</td>
<td class="sec_col" rowspan="2">
This spans two rows
</td>
<td class="thir_col">column 3 row 1</td>
</tr>
<tr>
<td>column 1 row 2</td>
<td>column 3 row 2</td>
</tr>
</tbody>
</table>




Click this for the div version:

SPOILER: Click to show

<style>
#special_box{background-color:gray;
width:100%;
height:300px;
margin:auto;
padding:4px 4px 4px 0px;
}
#special_box div{
padding:6px;
}
#sb_title{width:96%;font-size:14px; color:red;text-align:center;border:1px solid black;margin-right:auto;margin-left:auto;
}
.first_col,.sec_col,.thir_col{border:1px solid black;
}
.first_col{width:20%;float:left;margin:4px 0px 4px 14px;
}
.sec_col{width:50%;float:left;margin:4px 0px 0px 14px;
}
.thir_col{width:20%;float:right;margin:4px 14px 4px 0px;
}
.top_box, .bot_box{border:1px solid black; margin:2px;
}
</style>

<p style="clear:both;"></p>
<div id="special_box">

<div id="sb_title">Title</div>

<div class="first_col">
<div class="top_box">Something</div>
<div class="bot_box">Something</div>
</div>

<div class="sec_col">Middle section
</div>
<div class="thir_col">
<div class="top_box">Something</div>
<div class="bot_box">Something</div>
</div>

</div>
<p style="clear:both;"></p>