incorrect horizontal lineup for table - html

Question

https://jsfiddle.net/tbnzaga9/
#smenu a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #A9A9A9;
}
.button {
position: absolute;
border: 1px solid black;
cursor: pointer;
background-color: #d3d3d3;
width: 30%;
left: 1%;
}
.right {
position: absolute;
right: 60%;
}
#smenu table tr td p {
display: inline-block;
float: left;
}
<div id='smenu'>
<table>
<tr>
<th> Title</th>
<th class='right'> Date</th>
</tr>
<tr>
<td class='button'>test</td>
<td class='right'>
<p>4/27</p>
</td>
</tr>
</table>
</div>
I was making a list of separate websites and the dates they were made, but I can't get them to line up! I tried float:left and display: inline-block, but it's just not lining up. Any suggestions?
Also - is there a better way than using a table?

Answer 1

try these change in CSS.
#smenu a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #A9A9A9;
}
.button {
border: 1px solid black;
cursor: pointer;
background-color: #d3d3d3;
}
td {
text-align: center;
width: 200px;
height:25px;
}
#smenu table tr td p {
//display: inline-block;
//float: left;
}

Answer 2

Try to replace <p></p> by <div></div> or use a css reset sheet to clear the paragraph doing a line break. Also, I think tables are ok to do things like this, but limit you more. If you really wanted to you could mimic a table with some divs where you have your rows and in each one have your columns you could have differents classes by rows and by column in different rows.

Answer 3

I would remove all "position:absolute".
Given that you have tabular data, it makes sense to just use a regular table tag.
I've also added the following styles:
.right {
padding-right: 60%;
}
#smenu table {
width:100%;
}
.right p {
margin:0px;
}
th {
text-align: left;
}
You can see the changes here:
https://jsfiddle.net/tbnzaga9/2/