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; }

[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.
--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, however.

If you are simply concerned with how your site appears on mobile devices, I'd recommend learning more about responsive 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.