Css layout, table or not
I need to implement a layout like that for a CSS:
picture: description
picture: description
.
.
.
picture: description
I'm tempted of doing it something like:
<table>
<tr>
<td>picture</td>
<td>description</td>
</tr>
.
.
.
</table>
But I've read that tables should be used only for strictly tabular data. My question is: is this the right case? If not, what would be a valid alternative?
html css html-table
edited Nov 15 at 22:50
Brian Tompsett - 汤莱恩
4,1631337100
asked Nov 3 '13 at 22:24
Luigi Tiburzi
1,83242340
add a comment |
I need to implement a layout like that for a CSS:
picture: description
picture: description
.
.
.
picture: description
I'm tempted of doing it something like:
<table>
<tr>
<td>picture</td>
<td>description</td>
</tr>
.
.
.
</table>
But I've read that tables should be used only for strictly tabular data. My question is: is this the right case? If not, what would be a valid alternative?
html css html-table
edited Nov 15 at 22:50
Brian Tompsett - 汤莱恩
4,1631337100
asked Nov 3 '13 at 22:24
Luigi Tiburzi
1,83242340
2
In my opinion it is tabular data. There are alot of alternatives, but people saying that tables are only for something and divs are for other things probably never made "browser independent" sites.
– Flash Thunder
Nov 3 '13 at 22:28
The HTML5<figure>and<figcaption>would be a good choice here. See here for more info.
– Dre
Nov 3 '13 at 22:28
If you're not using HTML5 so can't use<figure>, I'd code it as a list -<ul>and<li>rather than a table.
– davidpauljunior
Nov 3 '13 at 23:11
add a comment |
I need to implement a layout like that for a CSS:
picture: description
picture: description
.
.
.
picture: description
I'm tempted of doing it something like:
<table>
<tr>
<td>picture</td>
<td>description</td>
</tr>
.
.
.
</table>
But I've read that tables should be used only for strictly tabular data. My question is: is this the right case? If not, what would be a valid alternative?
html css html-table
edited Nov 15 at 22:50
Brian Tompsett - 汤莱恩
4,1631337100
asked Nov 3 '13 at 22:24
Luigi Tiburzi
1,83242340
I need to implement a layout like that for a CSS:
picture: description
picture: description
.
.
.
picture: description
I'm tempted of doing it something like:
<table>
<tr>
<td>picture</td>
<td>description</td>
</tr>
.
.
.
</table>
But I've read that tables should be used only for strictly tabular data. My question is: is this the right case? If not, what would be a valid alternative?
html css html-table
html css html-table
edited Nov 15 at 22:50
Brian Tompsett - 汤莱恩
4,1631337100
asked Nov 3 '13 at 22:24
Luigi Tiburzi
1,83242340
edited Nov 15 at 22:50
Brian Tompsett - 汤莱恩
4,1631337100
asked Nov 3 '13 at 22:24
Luigi Tiburzi
1,83242340
edited Nov 15 at 22:50
Brian Tompsett - 汤莱恩
4,1631337100
edited Nov 15 at 22:50
Brian Tompsett - 汤莱恩
4,1631337100
edited Nov 15 at 22:50
Brian Tompsett - 汤莱恩
4,1631337100
4,1631337100
asked Nov 3 '13 at 22:24
Luigi Tiburzi
1,83242340
asked Nov 3 '13 at 22:24
Luigi Tiburzi
1,83242340
asked Nov 3 '13 at 22:24
Luigi Tiburzi
1,83242340
1,83242340
2
In my opinion it is tabular data. There are alot of alternatives, but people saying that tables are only for something and divs are for other things probably never made "browser independent" sites.
– Flash Thunder
Nov 3 '13 at 22:28
The HTML5<figure>and<figcaption>would be a good choice here. See here for more info.
– Dre
Nov 3 '13 at 22:28
If you're not using HTML5 so can't use<figure>, I'd code it as a list -<ul>and<li>rather than a table.
– davidpauljunior
Nov 3 '13 at 23:11
add a comment |
2
In my opinion it is tabular data. There are alot of alternatives, but people saying that tables are only for something and divs are for other things probably never made "browser independent" sites.
– Flash Thunder
Nov 3 '13 at 22:28
The HTML5<figure>and<figcaption>would be a good choice here. See here for more info.
– Dre
Nov 3 '13 at 22:28
If you're not using HTML5 so can't use<figure>, I'd code it as a list -<ul>and<li>rather than a table.
– davidpauljunior
Nov 3 '13 at 23:11
2
2
In my opinion it is tabular data. There are alot of alternatives, but people saying that tables are only for something and divs are for other things probably never made "browser independent" sites.
– Flash Thunder
Nov 3 '13 at 22:28
In my opinion it is tabular data. There are alot of alternatives, but people saying that tables are only for something and divs are for other things probably never made "browser independent" sites.
– Flash Thunder
Nov 3 '13 at 22:28
The HTML5
<figure> and <figcaption> would be a good choice here. See here for more info.– Dre
Nov 3 '13 at 22:28
The HTML5
<figure> and <figcaption> would be a good choice here. See here for more info.– Dre
Nov 3 '13 at 22:28
If you're not using HTML5 so can't use
<figure>, I'd code it as a list - <ul> and <li> rather than a table.– davidpauljunior
Nov 3 '13 at 23:11
If you're not using HTML5 so can't use
<figure>, I'd code it as a list - <ul> and <li> rather than a table.– davidpauljunior
Nov 3 '13 at 23:11
add a comment |
1 Answer
1
active
oldest
votes
You should use the new HTML5 elements for this as they are semantically rich.
figure and figcaption
This is how the mark up would look like in a website:
<figure>
<img src="example.jpg" alt="example" />
<figcaption>
<p>This is the text I would use to describe the image</p>
</figcaption>
</figure>
Here is the jsFiddle I used floats for position and widths for the layout, which always can be changed by you.
Ok thanks. This has shown me valid tools I wasn't aware of. By the way, by your fiddle, it is not clear how one could center the <p> with respect to the image. Thank you though!
– Luigi Tiburzi
Nov 4 '13 at 9:19
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f19758942%2fcss-layout-table-or-not%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You should use the new HTML5 elements for this as they are semantically rich.
figure and figcaption
This is how the mark up would look like in a website:
<figure>
<img src="example.jpg" alt="example" />
<figcaption>
<p>This is the text I would use to describe the image</p>
</figcaption>
</figure>
Here is the jsFiddle I used floats for position and widths for the layout, which always can be changed by you.
Ok thanks. This has shown me valid tools I wasn't aware of. By the way, by your fiddle, it is not clear how one could center the <p> with respect to the image. Thank you though!
– Luigi Tiburzi
Nov 4 '13 at 9:19
add a comment |
You should use the new HTML5 elements for this as they are semantically rich.
figure and figcaption
This is how the mark up would look like in a website:
<figure>
<img src="example.jpg" alt="example" />
<figcaption>
<p>This is the text I would use to describe the image</p>
</figcaption>
</figure>
Here is the jsFiddle I used floats for position and widths for the layout, which always can be changed by you.
Ok thanks. This has shown me valid tools I wasn't aware of. By the way, by your fiddle, it is not clear how one could center the <p> with respect to the image. Thank you though!
– Luigi Tiburzi
Nov 4 '13 at 9:19
add a comment |
You should use the new HTML5 elements for this as they are semantically rich.
figure and figcaption
This is how the mark up would look like in a website:
<figure>
<img src="example.jpg" alt="example" />
<figcaption>
<p>This is the text I would use to describe the image</p>
</figcaption>
</figure>
Here is the jsFiddle I used floats for position and widths for the layout, which always can be changed by you.
You should use the new HTML5 elements for this as they are semantically rich.
figure and figcaption
This is how the mark up would look like in a website:
<figure>
<img src="example.jpg" alt="example" />
<figcaption>
<p>This is the text I would use to describe the image</p>
</figcaption>
</figure>
Here is the jsFiddle I used floats for position and widths for the layout, which always can be changed by you.
answered Nov 3 '13 at 22:33
user2578173
Ok thanks. This has shown me valid tools I wasn't aware of. By the way, by your fiddle, it is not clear how one could center the <p> with respect to the image. Thank you though!
– Luigi Tiburzi
Nov 4 '13 at 9:19
add a comment |
Ok thanks. This has shown me valid tools I wasn't aware of. By the way, by your fiddle, it is not clear how one could center the <p> with respect to the image. Thank you though!
– Luigi Tiburzi
Nov 4 '13 at 9:19
Ok thanks. This has shown me valid tools I wasn't aware of. By the way, by your fiddle, it is not clear how one could center the <p> with respect to the image. Thank you though!
– Luigi Tiburzi
Nov 4 '13 at 9:19
Ok thanks. This has shown me valid tools I wasn't aware of. By the way, by your fiddle, it is not clear how one could center the <p> with respect to the image. Thank you though!
– Luigi Tiburzi
Nov 4 '13 at 9:19
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f19758942%2fcss-layout-table-or-not%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
In my opinion it is tabular data. There are alot of alternatives, but people saying that tables are only for something and divs are for other things probably never made "browser independent" sites.
– Flash Thunder
Nov 3 '13 at 22:28
The HTML5
<figure>and<figcaption>would be a good choice here. See here for more info.– Dre
Nov 3 '13 at 22:28
If you're not using HTML5 so can't use
<figure>, I'd code it as a list -<ul>and<li>rather than a table.– davidpauljunior
Nov 3 '13 at 23:11