creating a custom tag for replacing table tag

[gaurav1989]

I have written the code (enclosed previous code )to create a table without using tr/td i.e. with using divs.

Now the requirement is to create a custom tag that will use divs and developer can use that custom tag in jsp page to create a table.
i.e. to create it in an generic way.

Not have an idea …from where and how to start ???

For eg.

<prefix:table style id >
<prefix:tr style= >
<input>
<prefix:td >
</prefix:td >
</prefix:tr >
</prefix:table >

[Minos]

The only way I can conceive of doing this is using XML, if someone has another thought I would be very intrigued....

[traq]

css{ display: table; } (http://www.quirksmode.org/css/display.html#table)

[gaurav1989]

let me clearly tell the problem

the requirement is to create a custom tag that will use divs
and developer can use that custom tag in JSP page to create a table.
i.e. to create it in an generic way.

i.e. because in my web application there are many files which are using table tag to create tables,
but the problem is coming on new devices such as IPAD,PDA's etc. in which table doesn't display properly.
Its indentation and all things burst out badly.

SO the idea is to create those tables using DIVS to avoid these problem and create custom tag for it that will have all properties i.e. height ,width etc.

so that any developer who even doesn't know divs can simply use that tag in place of table tag in JSP.


Not have an idea …from where and how to start ???

For eg.

<prefix:table style id >
<prefix:tr style= >
<input>
<prefix:td >
</prefix:td >
</prefix:tr >
</prefix:table >

Please help me if it is possible ...

Please it is urgent.

[traq]

let me more clearly explain my answer.

using display: table (display: table-row, display: table-cell) on your elements tells browsers to style and display them as though they were <table>s, <tr>s, and <td>s. This is the most straightforward method of using <div>s in place of a table. All you need to do is nest your <div>s in the same way you would if you were actually using a table:

<div style="display: table">
<div style="display: table-row">
<div style="display: table-cell">
</div>
<div style="display: table-cell">
</div>
</div>
</div>
question: are you using these tables for tabular information, or for layout?
--tabular data: use the tables. that's what they're for. you might like this article (http://css-tricks.com/9096-responsive-data-tables/).
--layout: learn more about css layouts. I've never found layout: table to be necessary; in fact, it preserves most of the disadvantages of using tables for layout in the first place (though it won't create most of the DOM-related problems).

If you want to use a created element with a prefix (as in your example), you'll need to use xml. This carries its own problems (http://www.webdevout.net/articles/beware-of-xhtml), however.

If you are simply concerned with how your site appears on mobile devices, I'd recommend learning more about responsive design (http://www.alistapart.com/articles/responsive-web-design/).

[djr33]

Those aren't divs. Divs are <div> tags, possibly with styling.

It sounds to me like you're approaching this entirely the wrong way: Safari browser on mobile devices has problems displaying tables-- now you're going to reinvent tables? That's at least going to be more work, and probably not going to be more compatible than tables are at the moment.

The better plan is to find out how to style the tables to work across devices. You can set default margins, padding, height, width, etc., that will fix any varying defaults on those devices. Aside from that, it will just take good code to make it work across all browsers.


(I posted at the same time as traq, and what he has said is equally valid.)

[gaurav1989]

first of all thanks traq & djr33 for your replies.

I have look on your suggestions.

The link http://css-tricks.com/9096-responsive-data-tables/ has been very useful to me and i have re-written the code.

But now i have been said that in our problem statement it has been instructed not to use table,tr,td.

Only to create table that support all its attributes to be created only using <div> tags and that to be self adjusting divs. If we make the browser window smaller the divs tags should be able to that(it should automatically changes its size).

On this also we have to create a custom tag that will include all this functionality and that can be used in jsp to create some layout.

can you please provide me some working or small example on this requirement. I have not worked on it and not able to find it anywhere.

Thanks a lot.

[gaurav1989]

Thanks a lot.

Please see my problem and help me out.

[traq]

is the css approach failing in some way, or are you simply being required to use a "custom tag"? is this a school assignment?

as I mentioned above, xml is the only way you'll get a custom tag. but it's not very compatible. it's tricky to get xml parsed as xml, even on browsers that support it (it will never work -properly- on IE).

using xml would require a custom DTD, and that's something I've never even tried.

of course, your <prefix:table> is not a "custom tag" per se, it's just namespaced. The "easiest" (note the quotes) way to do it would be to use css and javascript to apply your custom styling and behavior to the tag, but you could do that with regular <table> tags and it would be less of a headache.

[gaurav1989]

is the css approach failing in some way, or are you simply being required to use a "custom tag"? is this a school assignment?

as I mentioned above, xml is the only way you'll get a custom tag. but it's not very compatible. it's tricky to get xml parsed as xml, even on browsers that support it (it will never work -properly- on IE).

using xml would require a custom DTD, and that's something I've never even tried.

of course, your <prefix:table> is not a "custom tag" per se, it's just namespaced. The "easiest" (note the quotes) way to do it would be to use css and javascript to apply your custom styling and behavior to the tag, but you could do that with regular <table> tags and it would be less of a headache.

ya i know i can do that with normal table tags but is the assignment that i have to create an table layout by only using div and no table,tr,td.

I have created it but it should be in an generic way by custom tags.

It is an assignment and we are not allowed to do it in any other way,Please help me as it has become a headache for me.

Their idea is to use DIV as DIVS can be self adjusting & it can also work on small devices etc. also there is lot of code using table tags so the idea is to replace that code with custom tag and divs so that it can work across all devices and it is an generic way.
I know there are other ways as mentioned by you but cant use that ,i have enquired that it has to be done by this way only.

Please help me , i am out of my mind and can't proceed further.

[traq]

well, a <div> is not a "custom tag." If you are allowed to use <div>s, then that's what I would do.

If you must make custom tags, then you'll be getting into all the xml problems I mentioned earlier. I really don't think it's the better solution, and unfortunately it's not something I have experience doing, so I couldn't offer much help.

[mburt]

<html>
<head>
<style type="text/css">
.cell {
float: left;
}
.inner {
border: 1px solid #A0A0A0;
display: block;
background: #F9F9F9;
padding: 5px;
}
.clear { clear: both; }
#table1 {
width: 700px;
height: 400px;
}
</style>
<script type="text/javascript">
var table = function(row, column, container) {
var obj = document.getElementById(container),
single_border = true;
for (var r = 0; r < row; r++) {
for (var c = 0; c < column; c++) {
var cell = document.createElement("div"),
inner = document.createElement("div");
cell.className = "cell";
cell.style.width = Math.floor(100/column)+"%";
inner.className = "inner";
inner.id = "r"+r+"c"+c;
inner.innerHTML = "&nbsp;"
if (single_border && c < column-1) inner.style.borderRight = "none";
if (single_border && r < row-1) inner.style.borderBottom = "none";
cell.appendChild(inner);
obj.appendChild(cell);
}
var clear = document.createElement("div");
clear.className = "clear";
obj.appendChild(clear);
}
}, update = function(row, column, value) {
document.getElementById("r"+row+"c"+column).innerHTML = value;
}
window.onload = function() {
table(4, 6, "table1");
update(0, 0, "first cell");
update(0, 1, "2nd cell");
update(2, 2, "another");
}
</script>
</head>
<body>
<div id="table1"></div>
</body>
</html>

Would this do it for ya? Style the cells however you want by changing the "inner" class. Hopefully its usage is self-explanatory.

[djr33]

It sounds to me like your instructor is requiring you to learn how to create layouts using divs, not tables.
And here are a lot of links that will help you:
http://www.google.com/search?q=divs+not+tables

Generally speaking, tables are for tabular data (like a list), NOT for layout. So use divs instead. If you need side-by-side parts of the page it can be tempting to use a table because divs can be confusing at first, but it's possible to do any layout needed using divs.

Look into CSS floats. That's the main tool you'll need.

Beyond that, we won't be doing your homework for you. But there is a LOT of information out there if you look into the topic of replacing tables with divs.


This has nothing at all to do with creating custom tags or anything like that. You'll use CSS to style div tags so that they can accomplish what tables do. You also don't need the 'table' styles available in CSS. Using floats and percentage-based widths (and heights?) you'll accomplish everything you need.

[mburt]

Sorry guys I didn't really read the post, I thought this was a thread asking for code. But yeah I definitely agree with djr.

I think the misconception here is that you need to create "custom" html tags (which isn't really valid at all) to manipulate a custom table, but really CSS is the answer. Using classes and id tags you can pretty much do exactly what you're looking to accomplish.

My suggestion is to google a good CSS tutorial and go from there.

[gaurav1989]

ok if we leave apart custom tags & use only div tags to create a table layout,

but how to code it in an generic way ??

so that we don't have to specify width and height every time in jsp

and that code can be used to create any number of tables in multiple files.....asking for code help !!!!!!

(because of that we need an custom tag so that we can use it in an multiple files)

[Minos]

Look, the answer to that question has been stated several times. You need to use css, and create classes. If you want it to be used in several files place the css into an external file.