I'm working on a website for my friend and we're having some problems. We have set up a table to handle the main page, which has within the table a shoutbox, news posts, and links. The news bits within the table are (obviously) longer in terms of space used up than the other bits on the table. So what I did was use the rowspan argument to increase the amount of space that the news feed takes up, but that really isn't enough room, since when we add more news we'll run low on room. Now I would assume that the table would auto-resize to accomidate the length of the news feed, and it does. The problem is that it seems to auto-resize the shoutbox and the first box on the links list as well. Also annoying is the fact that the news is centered both horizontally and vertically, and I would like to center it horizontally only. Both of these are interconnected, because before I resized the news stuff everything worked perfectly, but after I did the problems began coming up. What can I do?
Personally I use css not tables for layout, but similar principles apply.
Because you can't say how big a persons screen will be, there is no one no. of pixels that can be defined as the screen width. Hence if you set the width of the side columns in pixels you can allow the center column to expand without altering the width of the others.
Does that help you at all? if not then you might want to show us the page you're working on - upload or zip.
maybe you can try this one. hope it helps
add to your HTML command:
<script type="text/javascript" language="javascript1.2">installTable(tableID);</script>Javascript:
var markerHTML = "<>";
var minWidth = 100;
var dragingColumn = null;
var startingX = 0;
var currentX = 0;
function getNewWidth () {
var newWidth = minWidth;
if (dragingColumn != null) {
newWidth = parseInt (dragingColumn.parentNode.style.width);
if (isNaN (newWidth)) {
newWidth = 0;
}
newWidth += currentX - startingX;
if (newWidth < minWidth) {
newWidth = minWidth;
}
}
return newWidth;
}
function columnMouseDown (event) {
if (!event) {
event = window.event;
}
if (dragingColumn != null) {
ColumnGrabberMouseUp ();
}
startingX = event.clientX;
currentX = startingX;
dragingColumn = this;
return true;
}
function columnMouseUp () {
if (dragingColumn != null) {
dragingColumn.parentNode.style.width = getNewWidth ();
dragingColumn = null;
}
return true;
}
function columnMouseMove (event) {
if (!event) {
event = window.event;
}
if (dragingColumn != null) {
currentX = event.clientX;
dragingColumn.parentNode.style.width = getNewWidth ();
startingX = event.clientX;
currentX = startingX;
}
return true;
}
function installTable (tableId) {
var table = document.getElementById (tableId);
// Test if there is such element in the document
if (table != null) {
// Test is this element a table
if (table.nodeName.toUpperCase () == "TABLE") {
document.body.onmouseup = columnMouseUp;
document.body.onmousemove = columnMouseMove;
for (i = 0; i < table.childNodes.length; i++) {
var tableHead = table.childNodes[i];
// Look for the header
// Tables without header will not be handled.
if (tableHead.nodeName.toUpperCase () == "THEAD") {
// Go through THEAD nodes and set resize markers
// IE in THEAD contains TR element which contains TH elements
// Mozilla in THEAD contains TH elements
for (j = 0; j < tableHead.childNodes.length; j++) {
var tableHeadNode = tableHead.childNodes[j];
// Handles IE style THEAD with TR
if (tableHeadNode.nodeName.toUpperCase () == "TR") {
for (k = 0; k < tableHeadNode.childNodes.length; k++) {
var column = tableHeadNode.childNodes[k];
var marker = document.createElement ("span");
marker.innerHTML = markerHTML;
marker.style.cursor = "move";
marker.onmousedown = columnMouseDown;
column.appendChild (marker);
if (column.offsetWidth < minWidth) {
column.style.width = minWidth;
}
else {
column.style.width = column.offsetWidth;
}
}
}
// Handles Mozilla style THEAD
else if (tableHeadNode.nodeName.toUpperCase () == "TH") {
var column = tableHeadNode;
var marker = document.createElement ("span");
marker.innerHTML = markerHTML;
marker.style.cursor = "move";
marker.onmousedown = columnMouseDown;
column.appendChild (marker);
if (column.offsetWidth < minWidth) {
column.style.width = minWidth;
}
else {
column.style.width = column.offsetWidth;
}
}
}
table.style.tableLayout = "fixed";
// Once we have found THEAD element and updated it
// there is no need to go through rest of the table
i = table.childNodes.length;
}
}
}
}
}-- uos...wrong thread...sorry
I'm working on a website for my friend and we're having some problems. We have set up a table to handle the main page, which has within the table a shoutbox, news posts, and links. The news bits within the table are (obviously) longer in terms of space used up than the other bits on the table. So what I did was use the rowspan argument to increase the amount of space that the news feed takes up, but that really isn't enough room, since when we add more news we'll run low on room. Now I would assume that the table would auto-resize to accomidate the length of the news feed, and it does. The problem is that it seems to auto-resize the shoutbox and the first box on the links list as well. Also annoying is the fact that the news is centered both horizontally and vertically, and I would like to center it horizontally only. Both of these are interconnected, because before I resized the news stuff everything worked perfectly, but after I did the problems began coming up. What can I do?
Use the vertical-align: top; style. This moves all of the text in each cell to the top.I always include that style with a table, because IE and FF do different things by default.
When you use rowspan or colspan, how the rows and columns are divided without any styles controlling them depends on the relative sizes of the contents. So if you have a rowspan of 2 in the second column, content in the top cells of columns 1 and 3, but nothing in the second rows of columns 1 and 3, the top cells in those columns will be taller.
Don't use pixels to define sizes. This locks you in to one screen resolution. Use points or percent instead.
i want column auto resize with data added in core java not in web applications
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.