Move <hr> vertically
I am trying to put a string in html. I found the "hr" tag, but it looks like it has a default position in the html. Is there a way to move it (a more or less similar word) closer to the text? Here is my code. The hr tag is in a div
<h5 style="color: black; text-align: left; margin-top: 1px; margin-left: 5px">SONG</h5>
<h5 style="color: black; text-align: left; margin-top: -46px; margin-left: 280px">ARTIST</h5>
<h5 style="color: black; text-align: left; margin-top: -46px; margin-left: 555px">ALBUM</h5>
<h5 style="color: black; text-align: right; margin-top: -46px;">TIME</h5>
<hr>
<p color="black" face="verdana" style="margin-top: -20px; margin-left: 5px; font-size:15px">Live like theres no tomorrow</p>
<hr>
Basically I want to use live to share different songs. Just to be sure I am not using JavaScript and I am at the core of HTML.
It looks like you just need the html table. I made an example for you: http://jsfiddle.net/b2boteLj/3/
HTML:
<table style="width:100%">
<tr>
<th><h5>SONG</h5></th>
<th><h5>ARTIST</h5></th>
<th><h5>ALBUM</h5></th>
<th><h5>TIME</h5></th>
</tr>
<tr>
<td>Live like theres no tomorrow</td>
<td>some artist</td>
<td>some album</td>
<td>some time</td>
</tr>
</table>
CSS
table, th, td {
border-top: 1px solid black;
border-collapse: collapse;
text-align: left;
}
th {
background-color: gray;
color: white;
}
td {
background-color: red;
color: white;
}
th,td {
padding: 5px;
}
This structure can also be used (with some added css) for interleaved interleaved lines, etc. Also note what <td>
is a table cell and <th>
is a table header cell - this can be useful if you want to apply different css options to the column headers. For more information on html tables and their styles see here: http://www.w3schools.com/html/html_tables.asp
If this is not what you want, let me know and I will do another example.
source to share
Usage hr
is generally considered somewhat of a bad practice nowadays as it is only used as a visual element without any contextual meaning. Instead, we use border
.
PS: Setting inline styles in your code is also bad practice. You may have done this just for the sake of example, but in real life, you prefer external css files whenever possible.
source to share