HTML align labels and texts - html

Question

I am trying to make a view that looks like the image below
My view contains:
<span>Title :</span>
<span>#ViewBag.Movie</span>
<div>Date : #ViewBag.Date</div>
<div>Transaction Number : #ViewBag.TransactionNo</div>
<div>Timing : #ViewBag.Timing</div>
<div>Rating : #ViewBag.Rating</div>
<div>Hall : #ViewBag.Hall</div>
Controller.cs:
ViewBag.Movie = "movie a";
ViewBag.Date = "3-Nov-2017";
ViewBag.TransactionNo = "1234";
ViewBag.Timing = "7:30pm";
ViewBag.Rating = "PG13";
ViewBag.Hall = "3";
How do I align the view to make it look like the image?

Answer 1

It is better to use HTML table if you are creating a table structure
Example:
<table>
<tr>
<th>Movie Information</th>
</tr>
<tr>
<td>Title</td>
<td>: movie a</td>
</tr>
<tr>
<td>Date</td>
<td>: 3-Nov-2017</td>
</tr>
<tr>
<td>Transaction Number</td>
<td>: 1234</td>
</tr>
<tr>
<td>Title</td>
<td>: movie a</td>
</tr>
</table?

Answer 2

First of all, you should get some knowledge about html and css.
Your idea starts well when you separate the title from the value with <span></span>, but then in the next lines you're using a single div for each line. Why? If you want to align or separate items on your screen, then you must put those items in their own elements, like div or span.
<div class='myLabel'>Title :</div><div class='myValue>#ViewBag.Movie</div>
<div class='myLabel'>Date :</div><div class='myValue>#ViewBag.Date</div>
then add a css-stylesheet, containing something like
.myLabel {
width: 150px;
}
.myValue {
float: left;
}