I have a short list of items
and to the far right (float right) I have an image. I need another image (with a little text undeneath it) between the list and the float right image.
Is creating a table with three blocks side by side (<td>) the best way to do this in HTML 5?
Not sure if this is the best practice, but would something like this work?
<div id="container" style="display:inline-block;">
<div id="col-1" style="float:left;">
<div id="col-2" style="display:inline;">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="174" height="174" />
<div id="col-3" style="display:inline;">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="162" height="175" />
So they should be in a list
Use the tags that describe the content = the browser will not know it is a list unless you tell the browser it is a list - don’t tell the browser it is a table or a paragraph with line breaks in it when it is a list.
Thanks for the code. It looks like about the same effort for a server to process as a table. What do you thnk? My site is in HTML5. HTML5 has tables right?
Yes, for displaying tabular data, not for positioning layout,
CSS has tables for positioning layout
I was referring to actual table tags.
I guess it would be possible to simply use a text editor’s “replace” and change to something like
<table> -> <div class=“table”>
<tr> -> <div class=“table_row”>
<td> -> <div class=“table_cell”>
But IMHO that’s changing one for the other without improving anything.
[font=calibri]There are various ways of achieving the end result, and it will probably depend on how you want the spacing between the items to work.
display:table;. You don’t need to slavishly recreate the table structure with
<div>s as Mittineague has said if there are more appropriate semantic elements you can use.
Float both the image blocks to the right
Float one image block to the right, float the list to the left, and align the remaining image block in the centre[/list]
If it isn’t tabular data then using a
<table> is not a valid option.[/font]