Representing Table with DIV

-3

I had a table

<td colspan="6">

    <table width="100%" border="0">

      <tr align="center">

        <td width="5%"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></td>

        <td width="7%"><strong>Item Id </strong></td>

        <td width="20%"><strong>Item</strong></td>

        <td width="17%"><strong>Type</strong></td>

        <td width="17%"><strong>Rate</strong></td>

        <td width="17%"><strong>Quantity</strong></td>

        <td width="17%"><strong>Price</strong></td>

      </tr>

I am representing the table through <DIV> like This

<div id="table">

             <div class="row" id="row" align="center">

                <div id="cell"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></div>

                <div id="cell"><strong>Item Id </strong></div>

                <div id="cell"><strong>Item</strong></div>

                <div id="cell"><strong>Type</strong></div>

                <div id="cell"><strong>Rate</strong></div>

                <div id="cell"><strong>Quantity</strong></div>

                <div id="cell"><strong>Price</strong></div>

             </div>

but I can't find any replacement for colspan="6". Can anyone help?

edited Dec 31 '18 at 16:46

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 19 '12 at 11:51

JANNURM

1661313

4

There is no equivalent for div because a div has no concept of "columns" (it is a generic block tag). The correct question is why? Tables are for tabular data, which you have here. What would be the benefit of converting it to a div, which is a generic block element?

– Burhan Khalid
Jun 19 '12 at 11:55

Nesting tables like that is never a good idea. ou should probably rethink your structure. And no, replacing all elements with divs is not the solution.

– Madara Uchiha♦
Jun 19 '12 at 11:55

3

If you have tabular data, use <table>! You just should not use <table> for mere layout purposes.

– Sirko
Jun 19 '12 at 11:56

2

That looks like tabular data. Hence, you should use a <table>. Why are you trying to change to <div>s? Bad idea.

– thirtydot
Jun 19 '12 at 11:56

You should use th (with scope="col" attribute and value I guess) and not td in your first example: they seem like the headers for the rest of your tabular data.

– FelipeAls
Jun 19 '12 at 12:41

add a comment |

-3

I had a table

<td colspan="6">

    <table width="100%" border="0">

      <tr align="center">

        <td width="5%"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></td>

        <td width="7%"><strong>Item Id </strong></td>

        <td width="20%"><strong>Item</strong></td>

        <td width="17%"><strong>Type</strong></td>

        <td width="17%"><strong>Rate</strong></td>

        <td width="17%"><strong>Quantity</strong></td>

        <td width="17%"><strong>Price</strong></td>

      </tr>

I am representing the table through <DIV> like This

<div id="table">

             <div class="row" id="row" align="center">

                <div id="cell"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></div>

                <div id="cell"><strong>Item Id </strong></div>

                <div id="cell"><strong>Item</strong></div>

                <div id="cell"><strong>Type</strong></div>

                <div id="cell"><strong>Rate</strong></div>

                <div id="cell"><strong>Quantity</strong></div>

                <div id="cell"><strong>Price</strong></div>

             </div>

but I can't find any replacement for colspan="6". Can anyone help?

edited Dec 31 '18 at 16:46

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 19 '12 at 11:51

JANNURM

1661313

4

There is no equivalent for div because a div has no concept of "columns" (it is a generic block tag). The correct question is why? Tables are for tabular data, which you have here. What would be the benefit of converting it to a div, which is a generic block element?

– Burhan Khalid
Jun 19 '12 at 11:55

Nesting tables like that is never a good idea. ou should probably rethink your structure. And no, replacing all elements with divs is not the solution.

– Madara Uchiha♦
Jun 19 '12 at 11:55

3

If you have tabular data, use <table>! You just should not use <table> for mere layout purposes.

– Sirko
Jun 19 '12 at 11:56

2

That looks like tabular data. Hence, you should use a <table>. Why are you trying to change to <div>s? Bad idea.

– thirtydot
Jun 19 '12 at 11:56

You should use th (with scope="col" attribute and value I guess) and not td in your first example: they seem like the headers for the rest of your tabular data.

– FelipeAls
Jun 19 '12 at 12:41

add a comment |

-3

I had a table

<td colspan="6">

    <table width="100%" border="0">

      <tr align="center">

        <td width="5%"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></td>

        <td width="7%"><strong>Item Id </strong></td>

        <td width="20%"><strong>Item</strong></td>

        <td width="17%"><strong>Type</strong></td>

        <td width="17%"><strong>Rate</strong></td>

        <td width="17%"><strong>Quantity</strong></td>

        <td width="17%"><strong>Price</strong></td>

      </tr>

I am representing the table through <DIV> like This

<div id="table">

             <div class="row" id="row" align="center">

                <div id="cell"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></div>

                <div id="cell"><strong>Item Id </strong></div>

                <div id="cell"><strong>Item</strong></div>

                <div id="cell"><strong>Type</strong></div>

                <div id="cell"><strong>Rate</strong></div>

                <div id="cell"><strong>Quantity</strong></div>

                <div id="cell"><strong>Price</strong></div>

             </div>

but I can't find any replacement for colspan="6". Can anyone help?

edited Dec 31 '18 at 16:46

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 19 '12 at 11:51

JANNURM

1661313

I had a table

<td colspan="6">

    <table width="100%" border="0">

      <tr align="center">

        <td width="5%"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></td>

        <td width="7%"><strong>Item Id </strong></td>

        <td width="20%"><strong>Item</strong></td>

        <td width="17%"><strong>Type</strong></td>

        <td width="17%"><strong>Rate</strong></td>

        <td width="17%"><strong>Quantity</strong></td>

        <td width="17%"><strong>Price</strong></td>

      </tr>

I am representing the table through <DIV> like This

<div id="table">

             <div class="row" id="row" align="center">

                <div id="cell"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></div>

                <div id="cell"><strong>Item Id </strong></div>

                <div id="cell"><strong>Item</strong></div>

                <div id="cell"><strong>Type</strong></div>

                <div id="cell"><strong>Rate</strong></div>

                <div id="cell"><strong>Quantity</strong></div>

                <div id="cell"><strong>Price</strong></div>

             </div>

but I can't find any replacement for colspan="6". Can anyone help?

html css html-table

edited Dec 31 '18 at 16:46

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 19 '12 at 11:51

JANNURM

1661313

edited Dec 31 '18 at 16:46

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 19 '12 at 11:51

JANNURM

1661313

edited Dec 31 '18 at 16:46

Brian Tompsett - 汤莱恩

4,2231338101

edited Dec 31 '18 at 16:46

Brian Tompsett - 汤莱恩

4,2231338101

edited Dec 31 '18 at 16:46

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 19 '12 at 11:51

JANNURM

1661313

asked Jun 19 '12 at 11:51

JANNURM

1661313

asked Jun 19 '12 at 11:51

JANNURM

1661313

4

There is no equivalent for div because a div has no concept of "columns" (it is a generic block tag). The correct question is why? Tables are for tabular data, which you have here. What would be the benefit of converting it to a div, which is a generic block element?

– Burhan Khalid
Jun 19 '12 at 11:55

Nesting tables like that is never a good idea. ou should probably rethink your structure. And no, replacing all elements with divs is not the solution.

– Madara Uchiha♦
Jun 19 '12 at 11:55

3

If you have tabular data, use <table>! You just should not use <table> for mere layout purposes.

– Sirko
Jun 19 '12 at 11:56

2

That looks like tabular data. Hence, you should use a <table>. Why are you trying to change to <div>s? Bad idea.

– thirtydot
Jun 19 '12 at 11:56

You should use th (with scope="col" attribute and value I guess) and not td in your first example: they seem like the headers for the rest of your tabular data.

– FelipeAls
Jun 19 '12 at 12:41

add a comment |

4

There is no equivalent for div because a div has no concept of "columns" (it is a generic block tag). The correct question is why? Tables are for tabular data, which you have here. What would be the benefit of converting it to a div, which is a generic block element?

– Burhan Khalid
Jun 19 '12 at 11:55

Nesting tables like that is never a good idea. ou should probably rethink your structure. And no, replacing all elements with divs is not the solution.

– Madara Uchiha♦
Jun 19 '12 at 11:55

3

If you have tabular data, use <table>! You just should not use <table> for mere layout purposes.

– Sirko
Jun 19 '12 at 11:56

2

That looks like tabular data. Hence, you should use a <table>. Why are you trying to change to <div>s? Bad idea.

– thirtydot
Jun 19 '12 at 11:56

You should use th (with scope="col" attribute and value I guess) and not td in your first example: they seem like the headers for the rest of your tabular data.

– FelipeAls
Jun 19 '12 at 12:41

There is no equivalent for div because a div has no concept of "columns" (it is a generic block tag). The correct question is why? Tables are for tabular data, which you have here. What would be the benefit of converting it to a div, which is a generic block element?

– Burhan Khalid
Jun 19 '12 at 11:55

Nesting tables like that is never a good idea. ou should probably rethink your structure. And no, replacing all elements with divs is not the solution.

– Madara Uchiha♦
Jun 19 '12 at 11:55

If you have tabular data, use <table>! You just should not use <table> for mere layout purposes.

– Sirko
Jun 19 '12 at 11:56

That looks like tabular data. Hence, you should use a <table>. Why are you trying to change to <div>s? Bad idea.

– thirtydot
Jun 19 '12 at 11:56

You should use th (with scope="col" attribute and value I guess) and not td in your first example: they seem like the headers for the rest of your tabular data.

– FelipeAls
Jun 19 '12 at 12:41

add a comment |

3 Answers
3

active

oldest

votes

OK, let's get this straight for the 100th time.

Tables are not evil.

Tables are for tabular data. If you have headers, rows or columns, then it's cool. Tables are the thing to use.

In HTML. Tables.

Misusing elements is evil

Using any element for the wrong reason is wrong.

h1 for images

table for layout

button for links

These things are wrong. And bad.

Summary

Use tables for tables, not for layout, and everyone will be happy.

answered Jun 19 '12 at 12:17

Rich Bradshaw

51.8k39157231

+1 but I didn't understand "h1 for images (is evil)". h1>img[alt] seems fine to me, if it's a real heading and if it can't be done in CSS (when WCAG2 Technique C30 w3.org/TR/WCAG-TECHS/C30.html ) can't be applied)

– FelipeAls
Jun 19 '12 at 12:38

Yeah, good point. I must admit that it did cross my mind when I wrote it. Perhaps imagine that every image on the page was an H1.

– Rich Bradshaw
Jun 19 '12 at 12:43

1

Oh the sort of CMS where everything is an image created server-side? OK I'm glad I don't work or see this sort of creepy/crappy project :)

– FelipeAls
Jun 19 '12 at 12:44

add a comment |

Div do not use concept of columns. You can have as many as you want, div's in a row. You can fix width of div and then can use them to build up table. By the way you can go for css framework like bootstrap will be much more efficient.

answered Jun 19 '12 at 12:13

Ankur

529

add a comment |

Make the div width in such a way that, it will occupy "TD" sections.

For that you just need to add one more class with some higher width in it and some less div on the new row.

answered Jun 19 '12 at 11:57

Sudip Pal

1,7971715

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f11100316%2frepresenting-table-with-div%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

OK, let's get this straight for the 100th time.

Tables are not evil.

Tables are for tabular data. If you have headers, rows or columns, then it's cool. Tables are the thing to use.

In HTML. Tables.

Misusing elements is evil

Using any element for the wrong reason is wrong.

h1 for images

table for layout

button for links

These things are wrong. And bad.

Summary

Use tables for tables, not for layout, and everyone will be happy.

answered Jun 19 '12 at 12:17

Rich Bradshaw

51.8k39157231

+1 but I didn't understand "h1 for images (is evil)". h1>img[alt] seems fine to me, if it's a real heading and if it can't be done in CSS (when WCAG2 Technique C30 w3.org/TR/WCAG-TECHS/C30.html ) can't be applied)

– FelipeAls
Jun 19 '12 at 12:38

Yeah, good point. I must admit that it did cross my mind when I wrote it. Perhaps imagine that every image on the page was an H1.

– Rich Bradshaw
Jun 19 '12 at 12:43

1

Oh the sort of CMS where everything is an image created server-side? OK I'm glad I don't work or see this sort of creepy/crappy project :)

– FelipeAls
Jun 19 '12 at 12:44

add a comment |

OK, let's get this straight for the 100th time.

Tables are not evil.

Tables are for tabular data. If you have headers, rows or columns, then it's cool. Tables are the thing to use.

In HTML. Tables.

Misusing elements is evil

Using any element for the wrong reason is wrong.

h1 for images

table for layout

button for links

These things are wrong. And bad.

Summary

Use tables for tables, not for layout, and everyone will be happy.

answered Jun 19 '12 at 12:17

Rich Bradshaw

51.8k39157231

+1 but I didn't understand "h1 for images (is evil)". h1>img[alt] seems fine to me, if it's a real heading and if it can't be done in CSS (when WCAG2 Technique C30 w3.org/TR/WCAG-TECHS/C30.html ) can't be applied)

– FelipeAls
Jun 19 '12 at 12:38

Yeah, good point. I must admit that it did cross my mind when I wrote it. Perhaps imagine that every image on the page was an H1.

– Rich Bradshaw
Jun 19 '12 at 12:43

1

Oh the sort of CMS where everything is an image created server-side? OK I'm glad I don't work or see this sort of creepy/crappy project :)

– FelipeAls
Jun 19 '12 at 12:44

add a comment |

OK, let's get this straight for the 100th time.

Tables are not evil.

Tables are for tabular data. If you have headers, rows or columns, then it's cool. Tables are the thing to use.

In HTML. Tables.

Misusing elements is evil

Using any element for the wrong reason is wrong.

h1 for images

table for layout

button for links

These things are wrong. And bad.

Summary

Use tables for tables, not for layout, and everyone will be happy.

answered Jun 19 '12 at 12:17

Rich Bradshaw

51.8k39157231

OK, let's get this straight for the 100th time.

Tables are not evil.

Tables are for tabular data. If you have headers, rows or columns, then it's cool. Tables are the thing to use.

In HTML. Tables.

Misusing elements is evil

Using any element for the wrong reason is wrong.

h1 for images

table for layout

button for links

These things are wrong. And bad.

Summary

Use tables for tables, not for layout, and everyone will be happy.

answered Jun 19 '12 at 12:17

Rich Bradshaw

51.8k39157231

answered Jun 19 '12 at 12:17

Rich Bradshaw

51.8k39157231

answered Jun 19 '12 at 12:17

Rich Bradshaw

51.8k39157231

answered Jun 19 '12 at 12:17

Rich Bradshaw

51.8k39157231

+1 but I didn't understand "h1 for images (is evil)". h1>img[alt] seems fine to me, if it's a real heading and if it can't be done in CSS (when WCAG2 Technique C30 w3.org/TR/WCAG-TECHS/C30.html ) can't be applied)

– FelipeAls
Jun 19 '12 at 12:38

Yeah, good point. I must admit that it did cross my mind when I wrote it. Perhaps imagine that every image on the page was an H1.

– Rich Bradshaw
Jun 19 '12 at 12:43

1

Oh the sort of CMS where everything is an image created server-side? OK I'm glad I don't work or see this sort of creepy/crappy project :)

– FelipeAls
Jun 19 '12 at 12:44

add a comment |

+1 but I didn't understand "h1 for images (is evil)". h1>img[alt] seems fine to me, if it's a real heading and if it can't be done in CSS (when WCAG2 Technique C30 w3.org/TR/WCAG-TECHS/C30.html ) can't be applied)

– FelipeAls
Jun 19 '12 at 12:38

Yeah, good point. I must admit that it did cross my mind when I wrote it. Perhaps imagine that every image on the page was an H1.

– Rich Bradshaw
Jun 19 '12 at 12:43

1

Oh the sort of CMS where everything is an image created server-side? OK I'm glad I don't work or see this sort of creepy/crappy project :)

– FelipeAls
Jun 19 '12 at 12:44

+1 but I didn't understand "h1 for images (is evil)". h1>img[alt] seems fine to me, if it's a real heading and if it can't be done in CSS (when WCAG2 Technique C30 w3.org/TR/WCAG-TECHS/C30.html ) can't be applied)

– FelipeAls
Jun 19 '12 at 12:38

Yeah, good point. I must admit that it did cross my mind when I wrote it. Perhaps imagine that every image on the page was an H1.

– Rich Bradshaw
Jun 19 '12 at 12:43

Oh the sort of CMS where everything is an image created server-side? OK I'm glad I don't work or see this sort of creepy/crappy project :)

– FelipeAls
Jun 19 '12 at 12:44

add a comment |

answered Jun 19 '12 at 12:13

Ankur

529

add a comment |

answered Jun 19 '12 at 12:13

Ankur

529

add a comment |

answered Jun 19 '12 at 12:13

Ankur

529

answered Jun 19 '12 at 12:13

Ankur

529

answered Jun 19 '12 at 12:13

Ankur

529

answered Jun 19 '12 at 12:13

Ankur

529

answered Jun 19 '12 at 12:13

Ankur

529

add a comment |

Make the div width in such a way that, it will occupy "TD" sections.

For that you just need to add one more class with some higher width in it and some less div on the new row.

answered Jun 19 '12 at 11:57

Sudip Pal

1,7971715

add a comment |

Make the div width in such a way that, it will occupy "TD" sections.

For that you just need to add one more class with some higher width in it and some less div on the new row.

answered Jun 19 '12 at 11:57

Sudip Pal

1,7971715

add a comment |

Make the div width in such a way that, it will occupy "TD" sections.

For that you just need to add one more class with some higher width in it and some less div on the new row.

answered Jun 19 '12 at 11:57

Sudip Pal

1,7971715

Make the div width in such a way that, it will occupy "TD" sections.

For that you just need to add one more class with some higher width in it and some less div on the new row.

answered Jun 19 '12 at 11:57

Sudip Pal

1,7971715

answered Jun 19 '12 at 11:57

Sudip Pal

1,7971715

answered Jun 19 '12 at 11:57

Sudip Pal

1,7971715

answered Jun 19 '12 at 11:57

Sudip Pal

1,7971715

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk