Text over the table? How do I fix that?

Caters Carrots

I am making a wiki type webpage. I got the table settled to be on the right side of the webpage. But there is text before the table in my HTML code. Here is my HTML code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Kepler Bb</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Robin</h1>
<p>Robin is almost always busy building something be it a crib or an entire home. He is married to Lisa. His parents died when he was very young. His grandparents though have survived.</p>
<table class="infobox">
	<thead>
		<caption>Robin</caption>
	</thead>
	<tbody>
	<tr>
		<td colspan="2"><img src = "http://cdn.simplyshredded.com/wp-content/uploads/2014/06/1.jpg"></td>
	</tr>
	</tbody>
	
</table>
</body>
</html>

And here is the CSS code that corresponds to it:

body{background-color: skyblue;}
table.infobox{float: right; border-style: solid; border-width: 1px; border-spacing: 3px; margin-bottom: 6.16667px; margin-top: 6.16667px; margin-left: 12.3167px; margin-right: 0px; padding: 2.46667px}
td{text-align: center}

This combined means that those 4 sentences in the <p> tags are above the table. But I want the table to be at the same level as those sentences so I think I need to either lower the text or raise the table. But will text automatically wrap when something like a table is at the same level as the text or do I need to add CSS properties to make it auto-wrap? And how can I change this code so that the text and the table start at the same level and are both below the heading?

I have used the inspector on Firefox to check the code for 1 of Wikipedia’s pages that have a table at the top of the page and I don’t see anything that would make the text be at the same level as the table but clearly, it does and the only text that is ever above the top table(like for example the table that has data about Mars on the top of the page about Mars) is text for distinctions.

So since I have 0 distinction text, how would I make the text be at the same level as the table instead of starting above it and have both be below the heading?

cipher-1024

This is an html question, not a Notepad++ question. This should be asked in an html forum, not here. Now, do you promise to only ask NPP questions here? OK, great.

Caption tags go immediately after the table tag, not in the head. I don’t think that broke anything, but pop it up a line anyway.

I’ve found floats to be irritating and unpredictable so that’s not the first place I go for layout.

    body {background-color: skyblue;}
    
    table.infobox {
    	border-style: solid;
    	border-width: 1px;
    	border-spacing: 3px;
    	margin-bottom: 6.16667px;
    	margin-top: 6.16667px;
    	margin-left: 12.3167px;
    	margin-right: 0px;
    	padding: 2.46667px;
    	display:inline-block;
    }
     
    td {text-align: center}
    
    p {width:200px;
    	display:inline-block;
    	vertical-align: top;
    }

There may be better ways to do this, but I think it does what you asked for.

Robin should pull his pants up a tiny bit.