Draw a box around a group of cells in a table.

  • Thread starter Thread starter Mr. Magic
  • Start date Start date
M

Mr. Magic

I have a table that has about 20 rows with 4 columns. I want to draw a box
around the first 10 rows and all of the columns and then a box around the
next 10 rows and all the columns.

Is there a way to do this as one big table so that all of the columns will
line up or do I need to split it in to two separate tables?

TIA - Jeff.
 
Is there a way to do this as one big table so that all of the columns
will line up or do I need to split it in to two separate tables?
Click to expand...

yes.

It really depends on how much work you want to put in this. You can
create your own component that can surround whatever columns and rows
you would like as a separate table. A Repeater is the most flexible
method of doing this.

With a standard grid, you can create margins around parts of the cell
(if you have cell spacing, this will produce an incomplete box,
however). This can be done with the row binding event. You can also cut
up a table with the row binding event, but it will be more complex.

The question, as Mark posed, is how are you outputting your tables. And
the bigger question is what is your desired outcome? Think from the
business perspective and not technology, as the business perspective may
(ie, should) sway the technological means of achieving it.

Peace and Grace,
Greg

--
Vote for Miranda's Christmas Story
http://tinyurl.com/mirandabelieve

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
I'm just creating a table. Not using from dataset or anything like that.

Just a plain old table used for making the layout look nice.
 
It's just a plain old table done in the .aspx code.

You know -

<table>
<tr>
<td>.....


Mark Rae said:
[please don't top-post]
I'm just creating a table. Not using from dataset or anything like that.

Just a plain old table used for making the layout look nice.
Click to expand...

:-)

Yes, but *HOW* are you creating the table? Are you writing out the HTML
markup by hand? Or are you adding rows to a client-side table with
JavaScript? Or are you building up the HTML dynamically server-side with
an <asp:Table /> webcontrol? Or....?
Click to expand...
 
Mr. Magic said:
It's just a plain old table done in the .aspx code.

You know -

<table>
<tr>
<td>.....
Click to expand...

You could make up the CSS for each type of border (a top-left cell, a top
cell, a top-right cell etc.) and apply it as appropriate.

Andrew
 
It's just a plain old table done in the .aspx code.

You know -

<table>
    <tr>
        <td>.....
Click to expand...

if it can be just one big box, separated into 2 parts then you can
simply do following layout. In other case when you want to have 2
boxes then you would need to add more classes to your css (left top
corner, right top corner, etc...)

<style>
table
{
border: 1px solid black
border-collapse:collapse;
}
..r10
{
border-bottom: 1px solid black
}
</style>
<table class="x">
<tr>
<td>.....
</td>
<td>.....
</td>
<td>.....
</td>
</tr>
<tr>
<td>.....
</td>
<td>.....
</td>
<td>.....
</td>
</tr>
<tr>
<td class="r10">.....
</td>
<td class="r10">.....
</td>
<td class="r10">.....
</td>
</tr>
<tr>
<td>.....
</td>
<td>.....
</td>
<td>.....
</td>
</tr>
</table>
 
Andrew said:
You could make up the CSS for each type of border (a top-left cell, a
top cell, a top-right cell etc.) and apply it as appropriate.
Click to expand...

Like this:

<html><head><title></title>
<style type="text/css">

table {
border-collapse:collapse;
}

td {
border: solid 1px gray;
}

..topL {
border-left: solid 3px black;
border-top: solid 3px black;
}

..top {
border-top: solid 3px black;
}

..topR {
border-top: solid 3px black;
border-right: solid 3px black;
}

..left {
border-left: solid 3px black;
}

..right {
border-right: solid 3px black;
}

..bottomL {
border-left: solid 3px black;
border-bottom: solid 3px black;
}

..bottom {
border-bottom: solid 3px black;
}

..bottomR {
border-bottom: solid 3px black;
border-right: solid 3px black;
}
</style></head>
<body>
<table>
<tr>
<td class="">&emsp;</td>
<td class="">&emsp;</td>
<td class="">&emsp;</td>
<td class="">&emsp;</td>
<td class="">&emsp;</td>
</tr>
<tr>
<td class="">&emsp;</td>
<td class="topL">&emsp;</td>
<td class="top">&emsp;</td>
<td class="topR">&emsp;</td>
<td class="">&emsp;</td>
</tr>
<tr>
<td class="">&emsp;</td>
<td class="left">&emsp;</td>
<td class="">&emsp;</td>
<td class="right">&emsp;</td>
<td class="">&emsp;</td>
</tr>
<tr>
<td class="">&emsp;</td>
<td class="bottomL">&emsp;</td>
<td class="bottom">&emsp;</td>
<td class="bottomR">&emsp;</td>
<td class="">&emsp;</td>
</tr>
<tr>
<td class="">&emsp;</td>
<td class="">&emsp;</td>
<td class="">&emsp;</td>
<td class="">&emsp;</td>
<td class="">&emsp;</td>
</tr>
</table>
</body>
</html>

HTH,

Andrew
 
Back
Top