質問者さんのコードには、HTML5の構文として間違っている点がありましたので、特に目立った部分にコメントを入れておきました。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<header><!-- headerタグとheadタグは同じ意味ではない。 -->
4 <link rel="stylesheet" type="text/css" href="Hiro's.css" media="all"><!-- headタグ内に記述 -->
5 <h1 class="title">Hiro's site</h1><!-- headerタグ内に記述。 -->
6</header>
7<section>
8 <h2>このサイトについて
9 <h2><!-- h2タグが閉じれていません。原則開始タグがある場合閉じタグが存在する。 -->
10 <p class="body">テキストテキストテキストテキストテキストテキスト</p>
11 <p class="body">テキストテキストテキストテキストテキストテキスト</p>
12 <div>
13 <table>
14 <tr>
15 <td class="image"><img src="プーさん.png" width="300px"></td>
16 </tr>
17 <tr>
18 <td class="text">
19 名前:<p>星座: </p>
20 <p>お住いの地域:</p>
21 </td>
22 </tr>
23 </table>
24 </div>
25</section>
26</html>
それを修正すると次のようになります。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <link rel="stylesheet" type="text/css" href="Hiro's.css" media="all">
5 <title>Hiro's site</title>
6</head>
7<header>
8 <h1 class="title">Hiro's site</h1>
9</header>
10<section>
11 <h2>このサイトについて</h2>
12 <p class="body">テキストテキストテキストテキストテキストテキスト</p>
13 <p class="body">テキストテキストテキストテキストテキストテキスト</p>
14 <div>
15 <table>
16 <tr>
17 <td class="image"><img src="プーさん.png" width="300px"></td>
18 </tr>
19 <tr>
20 <td class="text">
21 名前:<p>星座: </p>
22 <p>お住いの地域:</p>
23 </td>
24 </tr>
25 </table>
26 </div>
27</section>
28</html>
また、CSSの.title
にかかっているtext-align: center;;
のセミコロンは2つ必要ありません。
以下の回答では、修正後のコードを使っていきます。
ここから回答
テキストと画像を同じ高さにする方法として、floatプロパティを指定する方法があります。
floatプロパティを指定した要素は、指定した方向(left ,right ,none)のいずれかに配置され、その後の要素はその要素の反対側に回り込みます。 また、floatを指定した後の要素が常にfloatが有効な状態になると不便なので、clearプロパティで回り込みを解除しないといけません。
そうすると、コード全体は以下のようになります。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <link rel="stylesheet" type="text/css" href="Hiro's.css" media="all">
5 <title>Hiro's site</title>
6</head>
7<header>
8 <h1 class="title">Hiro's site</h1>
9</header>
10<section>
11 <div class="Main"><!-- .Mainで左側(メイン?)に表示したいものを囲う -->
12 <h2>このサイトについて</h2>
13 <p class="body">テキストテキストテキストテキストテキストテキスト</p>
14 <p class="body">テキストテキストテキストテキストテキストテキスト</p>
15 </div>
16 <table>
17 <tr>
18 <td>
19 <img src="プーさん.png" width="300px">
20 </td>
21 </tr>
22 <tr>
23 <td class="text">名前:<p>星座: </p>
24 <p>お住いの地域:</p></td>
25 </tr>
26 </table>
27 <div class="clear"></div><!-- ここでclearプロパティを使ってfloatを解除しています. -->
28</section>
29</html>
CSS
1@charset "UTF-8";
2* {
3 margin: 0;
4}
5
6html {
7 background-image: url(SunBeams.png);
8 -webkit-background-size: cover;
9 -moz-background-size: cover;
10 -o-background-size: cover;
11 background-size: cover;
12 background-attachment: fixed;
13 overflow-x: hidden;
14 overflow-y: scroll;
15}
16
17.title {
18 color: orange;
19 background-image: url(HiroHeader.jpg);
20 width: 1350px;
21 height: 250px;
22 padding-top: 100px;
23 padding-left: 50px;
24 text-align: center;;
25 background-position: center;
26}
27
28body {
29 color: white;
30 width: 100%; /* 追加 */
31}
32
33h2 {
34 padding-bottom: 10px;
35}
36
37.body {
38 padding-bottom: 10px;
39}
40
41div {
42 vertical-align: top;
43 /*margin-right: 10px;
44 padding-bottom: 100px;*/
45}
46
47.Main { /* 追加 */
48 text-align: left; /* 文字を左側に寄せる。 */
49 height: 100%; /* ぷーさんとテーブルが左側にきてしまうのを防ぐために追加。 */
50 width: 50%; /* widthの指定。 */
51 float: left; /* float: leftを適用 */
52}
53
54.clear { /* 追加 */
55 clear: both; /* float: left の解除。 */
56}
余計なことかもしれませんが、HTMLやCSSについて、基礎を学習すると今後ウェブサイトの作成などをスムーズに行えると思います。