I am wondering how can I indent using HTML and CSS doing something sort of like this.
Time: 5pm
Address: Washington
Location: Cafe
Basically I want to have the information align, try using list but that didn't work.
Thanks in advance.
3 Answers
Try using a table. I'm not sure if you really want to do that, but from my knowledge it will serve what you need to do. Here's a simple table for you to use:
<table width="100%" border="0">
<tr>
<td>Time:</td>
<td>Yes</td>
</tr>
<tr>
<td>Date:</td>
<td>No?</td>
</tr>
<tr>
<td>Bilbo:</td>
<td>Baggins</td>
</tr>
</table>
Edit: Use CSS, and HTML properties to set the table how you want. I suggest just adjusting the entire width of the table to how you want it, etc etc.
3 Comments
Jongware
The
width="100%" is not necessary, and may even be harmful (the table gets expanded to the full width of the HTML page). If you remove it, the browser will expand each column to fit its widest cell only.
RobertO
Table is best for such things, because it auto scales width of column - no need to set fixed width.
nzifnab
This use-case may make tables the best choice (tabular-looking data and all that), but you might want to include a warning that trying to shimmy tables into all of your design to "align" other visual elements is a huge no-no.
you can use spans with display 'inline-block' value and some fixed width, like:
<style type="text/css">
.fixed-length{
display:inline-block;
width:100px;
}
</style>
<span class="fixed-length">something</span>
3 Comments
blurfus
I am not sure this answers the question of aligning many (six?) elements correctly in a tabular format
Martin Braun
@blurfus it does, imagine 6 spans and every odd span will get the above css and after every even span you will have a
<br />. However, a fixed width is a no go here.blurfus
@modiX well, the answer - as it currently stands - does not. Your enhanced answer does only if the viewport is big enough.
Use tables for tabular data. If, however, you just want to align a few elements as table (i.e. row/columns), you can adjust your div, p, or span tags (or whatever else) to display in tabular format.
UPDATED based on comments
HTML
<div id="tabled">
<p>
<span class="left">Date:</span><span>today</span>
</p>
<p>
<span class="left">Address:</span><span>today</span>
</p>
<p>
<span class="left">Location:</span><span>today</span>
</p>
</div>
CSS
#tabled {
display: table;
text-align: left;
}
#tabled span {
display: table-cell;
min-width: 4em; /* arbitrary width; adjust as necessary */
}
#tabled span.left {
text-align: left;
}
4 Comments
Jongware
I thought of mentioning spans but decided against it. First off, you should not specify the width in pixels; use
em instead, as this will scale with the font size. More important, this requires you must know the width in advance. With tables, you don't need to, and the browser will calculate the correct column widths for you.blurfus
fair assessment on
px vs em (I know the diff) but it was not a requirement (I just added it there for illustration purposes) - But even if the browser can calculate the correct column widths, they could vary from table to table (since we don't know the width of the values) so you are at the mercy of the data for your layout which, in my view, leaves your design vulnerable to un-desired outcomes (i.e. elements not aligning quite right).
Jukka K. Korpela
The answer uses
label inappropriately (label is for labeling controls) and sets an arbitrary minimum width in pixels.blurfus
thanks for the feedback guys - adjusted the code to reflect the improvements suggested. Still left the 'arbitrary' min width as it was not against the requirements.
#left>div{text-align:left;}to align the text to the left