473,883 Members | 1,624 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Insert table cell with CSS?

Hello all!

I've got a big bunch of pages using tables for layout. Eventually I'll
get them set up with more modernized code, but in the meantime I'd
like to slip in a little quick holiday decoration. I'd like to insert
a table cell with a fixed width (as much as such things can be fixed)
and a repeating garland background so as to show up along the left
side of the table, repeating down its length.

Our site has a couple thousand static pages, generated from a database
& a couple dozen templates. A couple years ago I did this with an
alternate version of the template set, but to bring all that up to
date with the changes made since would be far from trivial. I'd like
to be able to just make a little code change to the templates that
would allow me to just change one file on the server in order to
insert the desired code on all pages on the site.

SSI would be ideal, but isn't an option as Apache 1.3 won't apply it
to the output of our shopping cart CGI script, and my hosting provider
is dragging its feet on an Apache 2.x upgrade which I hear could
handle it.

That leaves CSS as looking like the most likely candidate, so I'm here
asking for some learned advice.

I've looked at "before" and "content" as a possible basis, but I'm not
sure they can handle the tags & quotes that need to be inserted. Also,
browser support doesn't seem all that great.

Can anyone suggest a solution that can insert the needed code, be
easily switched to inserting absolutely nothing later on, and fail
gracefully on older browsers? (We still get NS3 hits, for crying out
loud!)

Thanks for any insight!

JA
Jul 20 '05 #1
7 10452
John A. wrote:

I've got a big bunch of pages using tables for layout. Eventually I'll
get them set up with more modernized code, but in the meantime I'd
like to slip in a little quick holiday decoration. I'd like to insert
a table cell with a fixed width (as much as such things can be fixed)
and a repeating garland background so as to show up along the left
side of the table, repeating down its length.

Sounds like a background-image. Look up the property and play around
with it to see if it gives the effect you want.

Can anyone suggest a solution that can insert the needed code, be
easily switched to inserting absolutely nothing later on, and fail
gracefully on older browsers? (We still get NS3 hits, for crying out
loud!)


Old browsers won't see your decoration -- doesn't sound like a problem.
Use CSS on top of the HTML structure and be prepared to live without it.
Jul 20 '05 #2
On 23 Dec 2003 10:45:26 GMT, "Philipp Lenssen" <in**@outer-court.com>
wrote:
John A. wrote:

I've got a big bunch of pages using tables for layout. Eventually I'll
get them set up with more modernized code, but in the meantime I'd
like to slip in a little quick holiday decoration. I'd like to insert
a table cell with a fixed width (as much as such things can be fixed)
and a repeating garland background so as to show up along the left
side of the table, repeating down its length.


Sounds like a background-image. Look up the property and play around
with it to see if it gives the effect you want.


That much I know. What I want is for the cell with that background to
not be there normally, but get inserted by CSS. I know the HTML code I
need inserted and where. I just don't know how to best go about it in
CSS.
Can anyone suggest a solution that can insert the needed code, be
easily switched to inserting absolutely nothing later on, and fail
gracefully on older browsers? (We still get NS3 hits, for crying out
loud!)


Old browsers won't see your decoration -- doesn't sound like a problem.
Use CSS on top of the HTML structure and be prepared to live without it.


Jul 20 '05 #3
John A. <no*****@spamme rs.virginiaquil ter.allowed.com > noted in
news:qs******** *************** *********@4ax.c om:
That much I know. What I want is for the cell with that background to
not be there normally, but get inserted by CSS. I know the HTML code I
need inserted and where. I just don't know how to best go about it in
CSS.


You really can't use CSS to dynamically insert html. As you'd stated, SSI
would be the ideal way to implement this . . . but if that's out of the
question -- then perhaps a feasible work-around would be to place a
background image in the table cell you wish for it to be next to. If you
place the background in and have it repeat only vertically, it won't
necessarily fill the the cell. You could then pad the side of the cell
that the background is to the width of the image. Then, rather than
filling the entire cell the text would only fill the part not occupied by
the background image.

For example, let's assume the garland is 100 pixels wide and the left-most
cell class is named "cell1" and you wanted the garland running down the
left side of the table, you could use css like this:

td.cell1 {
background: #fff url(garland.gif ) repeat-y;
padding: 0 0 100px 0; }

This would have the garland occupy the first 100 pixels of the cell; the
rest of the cell content (text or whathaveyou) would occupy the rest.

CSS 2 Background properties:
http://www.w3.org/TR/REC-CSS2/colors...und-properties

--
Allen http://theprawn.com

This is for the flowers, http://protempore.org/jarday
who have no appreciation
for beauty;
And the sheer ugliness of it all
will surely be lost on them.
Jul 20 '05 #4
On Tue, 23 Dec 2003 15:43:03 GMT, Allen <cr********@the prawn.com>
wrote:
John A. <no*****@spamme rs.virginiaquil ter.allowed.com > noted in
news:qs******* *************** **********@4ax. com:
That much I know. What I want is for the cell with that background to
not be there normally, but get inserted by CSS. I know the HTML code I
need inserted and where. I just don't know how to best go about it in
CSS.


You really can't use CSS to dynamically insert html. As you'd stated, SSI
would be the ideal way to implement this . . . but if that's out of the
question -- then perhaps a feasible work-around would be to place a
background image in the table cell you wish for it to be next to. If you
place the background in and have it repeat only vertically, it won't
necessarily fill the the cell. You could then pad the side of the cell
that the background is to the width of the image. Then, rather than
filling the entire cell the text would only fill the part not occupied by
the background image.

For example, let's assume the garland is 100 pixels wide and the left-most
cell class is named "cell1" and you wanted the garland running down the
left side of the table, you could use css like this:

td.cell1 {
background: #fff url(garland.gif ) repeat-y;
padding: 0 0 100px 0; }

This would have the garland occupy the first 100 pixels of the cell; the
rest of the cell content (text or whathaveyou) would occupy the rest.

CSS 2 Background properties:
http://www.w3.org/TR/REC-CSS2/colors...und-properties


Interesting, but I already have a background image in the cell. The
cell's width varies throughout the site as the content varies and we
allow the browser to flow the text itself.

The site is http://www.virginiaquilter.com/ and the image with the
garland is http://www.virginiaquilter.com/image...lt3holiday.jpg

The last time we used it I manually added <td ROWSPAN="3"
BACKGROUND="/images/tanquilt3holida y.jpg" BGCOLOR="#CDBE9 D"
width="32"><img src="/images/spacer.gif" width=24></td> to insert the
garland. It probably could have been coded more efficiently. :)

JA
Jul 20 '05 #5
Per news:5a******** *************** *********@4ax.c om, John A.
<no*****@spamme rs.virginiaquil ter.allowed.com > noted:
Interesting, but I already have a background image in the cell. The
cell's width varies throughout the site as the content varies and we
allow the browser to flow the text itself.


Perhaps, then, apply the background image to the table itself as outlined
previously for the cell -- then padd the cells accordingly?

Like I said, you cannot insert HTML using CSS (though, in a sense, you can
/hide/ html that's already there). So, creatively coming up with a
workaround is an option -- otherwise, you're stuck re-coding it to
accomodate. It would be entirely feasible (and a good idea for the future)
to replace those tables with divs and even, perhaps, include a few extra
spans to leave yourself room to input these seasonal touches. It would
require a bit of a time investment, initially, but would save time (and
headache) later on.

--
Allen http://theprawn.com

This is for the flowers, http://protempore.org/jarday
who have no appreciation
for beauty;
And the sheer ugliness of it all
will surely be lost on them.
Jul 20 '05 #6
On Tue, 23 Dec 2003 23:46:57 GMT, Allen <cr********@the prawn.com>
wrote:
Per news:5a******** *************** *********@4ax.c om, John A.
<no*****@spamm ers.virginiaqui lter.allowed.co m> noted:
Interesting, but I already have a background image in the cell. The
cell's width varies throughout the site as the content varies and we
allow the browser to flow the text itself.


Perhaps, then, apply the background image to the table itself as outlined
previously for the cell -- then padd the cells accordingly?

Like I said, you cannot insert HTML using CSS (though, in a sense, you can
/hide/ html that's already there). So, creatively coming up with a
workaround is an option -- otherwise, you're stuck re-coding it to
accomodate. It would be entirely feasible (and a good idea for the future)
to replace those tables with divs and even, perhaps, include a few extra
spans to leave yourself room to input these seasonal touches. It would
require a bit of a time investment, initially, but would save time (and
headache) later on.


Well, after a Javascrip-based false start (I had a script invoked from
between a <tr> and a <td> to write the desired code, which worked fine
in all browsers tested until Netscape Composer insisted on wrapping
the invocation code with <td></td>,) I'm going with a combination of a
mostly blank extra cell with its own class name and CSS to modify it.

It works fine in NS7.01, and in Mozilla 1.5rc1, but IE5.5 and NS4.7
don't expand the cell width per the CSS.

HTML code...

<td rowspan=3 BACKGROUND="/tanquilt3.jpg" width=0 BGCOLOR="#CDBE9 D"
class="decobord ">&nbsp;</td>

(Had to include default color & background and a non breaking space
for NS4 to not just put a blank gap left of our navigation bar. NS7
and Moz. don't render a gap. Didn't test IE for that bug.)

CSS code...

td.decobord {
width:32px;
background: url(/images/tanquilt3holida y.jpg);
margin:0;
padding:0; }

The test page...

http://www.virginiaquilter.com/test/testproduct.html

Can anyone suggest a workaround? I really don't want to have the cell
always at the decorative width, and would like CSS-less browsers to
default to something narrow. (I'm guessing systems still running those
browsers would tend to have lower display resolutions too.)

Would sticking something else in the table, like a 1-pixel transparent
spacer GIF, and having CSS resize it when I decorate do the trick?

Thanks for any insight!
JA
Jul 20 '05 #7
On Fri, 26 Dec 2003 05:54:34 GMT, John A.
<no*****@spamme rs.virginiaquil ter.allowed.com > wrote:
The test page...

http://www.virginiaquilter.com/test/testproduct.html

Can anyone suggest a workaround? I really don't want to have the cell
always at the decorative width, and would like CSS-less browsers to
default to something narrow. (I'm guessing systems still running those
browsers would tend to have lower display resolutions too.)

Would sticking something else in the table, like a 1-pixel transparent
spacer GIF, and having CSS resize it when I decorate do the trick?


Okay, after asking if that would work theoretically, I went ahead and
did it. It seems to work.

New HTML code...

<td rowspan=3 BACKGROUND="/tanquilt3.jpg" width=0 BGCOLOR="#CDBE9 D"
class="decobord "><img src="/images/spacer.gif" width=0
class="decospac e"></td>

New CSS code...

td.decobord {
width:32px;
background: url(/images/tanquilt3holida y.jpg);
margin:0;
padding:0; }

img.decospace {
width:31px; }

Test page still as above.

Seems to work in all tested browsers.

But would putting, say, a DIV instead of an image perhaps be more
bandwidth- and connection-efficient? Or would that have as much
backwards-compatibility as using the image+CSS?

Thanks!
JA
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2994
by: David Bradbury | last post by:
I currently have an iframe on a webpage into which users can insert content. They can further customise the text as I've included buttons such as Bold, Italic, Bullet point etc. This is done along the lines of <td><div class="cbtn" onClick="cmdExec('bold',idContent)" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"> <img hspace="1" vspace=1 align=absmiddle...
1
2121
by: Eitan | last post by:
Hello, In a table element How can I insert cell in their order (A, B, C, D ...) on javascript runtime, but see the cells inserted from right to left. I am doing : myTable.row(0).insertCell(0) // cell A myTable.row(0).insertCell(1) // cell B myTable.row(0).insertCell(2) // cell C What I want to see is the cells visible at the html in the order of :
1
2936
by: Abareblue | last post by:
I have no clue on how to insert a record into access. here is the whole thing using System; using System.Drawing; using System.Collections; using System.ComponentModel;
20
5677
by: Guadala Harry | last post by:
In an ASCX, I have a Literal control into which I inject a at runtime. litInjectedContent.Text = dataClass.GetHTMLSnippetFromDB(someID); This works great as long as the contains just client-side HTML, CSS, etc. What I want to do is somehow insert a *server control* into the , then set the server control's properties at runtime.
1
2033
by: sudhaoncyberworld | last post by:
I have scenario like below, in table we have insert row & in row we have insert cell, but i need to insert an table element in td, Here in td i have tbl1 & tbl2 as child and now i want to insert tbl0 as first child (before the tbl1) var tbl=document.createElement('TABLE'); var tr=tbl.insertRow(); tr.id='tr'; var td=tr.insertCell();
28
18556
by: Giggle Girl | last post by:
Can someone show me how to insert a row at any given row index of an already created table? It only has to work in IE6 (used on intranet at work). Specifically, if a table is 20 rows in total (thought his will vary), and someone wants to insert a new row at row 5, i need for one row to be added, and each of the rows from 5-20 to be "cloned" to 6-21. The contents of row 5 may vary as well; it is not a straight copy of an exisiting row.
6
2603
by: strauchdieb | last post by:
hey, i'm a little frustrated. i'm trying to add a td element with appendChild as last child to a tr element. but it adds the td element always as first child to the tr element? although appendChild should add the new child at the end. what could be wrong?
1
14274
by: nandan | last post by:
Hi, Iam using devexpress xtrareports with vb.net .I want to insert page break after writting some contents to the Detail area(band). can anybody help me?Thanks in advance Nandan I using the following code Private Function drawtable() Try Dim table As XRTable Dim row() As XRTableRow Dim cell() As XRTableCell table = New XRTable
6
19339
by: Amzul | last post by:
hello all i did this table useing createElement(); i am trying to insert html code to the <td> to put img and links but so far no luck any one have an idea on how it shouled b done? the second qustion is how i can desing the hieght of the td here is snippet var cell = document.createElement("td");
0
9943
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9793
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
10858
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10419
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9577
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7134
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4619
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4225
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3237
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.