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

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.
 
G

Gregory A. Beamer

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! |
*******************************************
 
M

Mr. Magic

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.
 
M

Mr. Magic

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...
 
A

Andrew Morton

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
 
G

Guest

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>
 
A

Andrew Morton

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Table where I want to draw a border around the whole table but not between the cells. 8
Splitting multiple cells in a Table 0
Need help with <rowspan> in an HTML table 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Trouble creating multi dimensional array. 0 to 26 in 3 dimensions. 1
How can I find occurrences of a column name FPPaymentID in the entire database (e.g table, stored procedure etc) in SSMS? 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
So I have (a sketch of) a universal system... 3

Members online

No members online now.
Total: 60 (members: 0, guests: 60)
Robots: 112

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,810
Latest member
Kassie0918

Latest Threads

Top