How to Align a specific Table Data of a table, HTML

user_15095411 0
Viewed 54

I just started making a website, and I don't understand why I can't bring part of it to align at the right. The code is provided below.

Code:

<!DOCTYPE html>
<html style="background-color: black;">
    <head>
        <title>My Portfolio</title>
        <style>
            #navigation-bar {
                background-color: black;
                color: grey;
                font-weight: bold;
                font-family: Script;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div id="navigation-bar">
            <table>
                <tr>
                    <th><img src="https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" height="50px" width="50px"></th>
                    <th><a href="/home" title="Home">Home</a></th>
                    <th><a href="/about" title="About Me">About Me</a></th>
                    <th><a href="/languages" title="Languages">Languages</a></th>
                    <th><a href="/work" title="Previous Work">Previous Work</a></th>
                    <th><a style="text-align: right;" href="https://puginarug.com" title="Beautiful Website">An Amazing Website</a></th>
                </tr>
            </table>
        </div>
    </body>
</html>

So obviously I just started coding this, but I am trying to get the last table header tag to be aligned to the right. But the output just shows it right next to the 5th table header tag. How can I make this specific table header tag go to the right?

navbar html-table css html
1 Answers

Instead of using your navigation-bar items as <table> and <th>, better approach would be to use list items using <ul> and <li> tags.

Using li:last-child with float: right like below will solve your problem.

Please follow the below code snippets:

li {
  display: inline;
  float: left;
}

li:last-child{
    float: right;
}

a {
  display: block;
  padding: 8px;
}
<ul>
   <li><img src="https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" height="50px" width="50px"></li>
   <li><a href="/home" title="Home">Home</a></li>
   <li><a href="/languages" title="Languages">Languages</a></li>
   <li><a href="/work" title="Previous Work">Previous Work</a></li>
   <li><a href="https://puginarug.com" title="Beautiful Website">An Amazing Website</a></li>
</ul>

Please refer to Horizontal navigation bar for more details.

user_167266270
Related