xslibx xslibx - 5 months ago 7
CSS Question

How to create an Hours of Operation list with HTML and CSS?

I'm having trouble figuring out how to properly create a list for hours of operations using basic html and css.

I trying to make 2 columns. On the left column is the day of the week (

text-align:right;
) and on the right is the Hours (
text-align:left;
) so that the right edge of the day and the left edge of the hours is aligned in the center.

Is there a way to do this and keeping the 2 list items aligned to the center?

Can this be done with a
<dl>
or 2
<ul>
?

here is a visual Example

Right:

Sunday: Closed
Monday: 9am - 5pm
Tuesday: 9am - 5pm
Wednesday: 9am - 5pm
Thursday: 9am - 5pm


Wrong:

Sunday: Closed
Monday: 9am - 5pm
Tuesday: 9am - 5pm
Wednesday: 9am - 5pm
Thursday: 9am - 5pm

Answer

You can use a normal <table> element for this. Since your data is actually a table, there is no shame in using it here. Alternatively a dl could be valid too.

th {
  text-align: right; 
}
<table>
<tr><th>Sunday</th><td>Closed</td></tr>
<tr><th>Monday</th><td>9am - 5pm</td></tr>
<tr><th>Tuesday</th><td>9am - 5pm</td></tr>
<tr><th>Wednesday</th><td>9am - 5pm</td></tr>
<tr><th>Thursday</th><td>9am - 5pm</td></tr>
</table>
  

Comments