IDの付け方について

Question

ガイドブックでCSSの勉強をしています。
とりあえず拡張子がCSSのフォームを作って、
CSSのファイルで制御するのはなんとなくわかりました。

ですが、はてなブログを利用しており、はてなで利用する時には、この方法が使えません。
なので、IDを付ける方法をマスターしたいのですが、慣れていないためIDの使い方がわかりません。

ガイドブックを利用して以下のとおり表を書くところまで出来ました。

ですが、このコードをブログの記事に貼り付けると、はてなブログのヘッダーのテーブルにマージンが発生します。

なので、このテーブルにだけ、<style>を適応させたいのですが、IDはどうつければいいのでしょうか？

追記
「♯」を使う方法がわかりやすいので、これを使いたいと思っています。
ですが以下のページを見ても、ガイドブックを見ても、
http://bit.ly/2Fb0ccx

セレクタに「♯」をつける以外に何も記載がありません。
ですが、以下のコードで「♯table」にすると、マージンが機能しなくなります。

この表にだけマージンを適応するようにIDを付けるには、どういうふうにIDをつければいいのでしょうか？

すいませんが、詳しい方、説明の上手な方で具体的に説明できる方、よろしくお願いします。
※こちらの知識不足で「セレクタを○○する」というような説明では理解出来ないと思います。

<style>
td,th{
    border: 2px solid;
}
table{
    border: 2px solid;
    margin-bottom: 30px;
}
</style>

                <table>
                <tr>
                    <td>名称</td>
                    <td>fruvege株式会社</td>
                </tr>
                <tr>
                    <td>住所</td>
                    <td>東京都新宿区中新宿１－２－３</td>
                </tr>
                <tr>
                    <td>電話</td>
                    <td>０３－１１１１－２２２２</td>
                </tr>
                                        <tr>
                        <th>創立</th>
                        <td>2007年4月</td>
                    </tr>
                    <tr>
                        <th>資本金</th>
                        <td>500万円</td>
                    </tr>
                    <tr>
                        <th>営業時間</th>
                        <td>11時から19時まで</td>
                    </tr>
                    <tr>
                        <th>メールでのお問い合わせ</th>
                        <td>[e-mail]</td>
                    </tr>
            </table>
コード
```

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[ZZ-TOP]

質問への追記、修正の依頼ありがとうございます

[yoshinavi]

現状の余分なマージンがどのくらいか不明なのですが「kei344」さんの回答をもとに、マージンの調整を行えば良いかと思います。

[ZZ-TOP]

解答頂きありがとうございます。

[ZZ-TOP]

yoshinaviさんも、ご質問ありがとうございます。解決しました。

Answer 1

セレクタに「♯」をつける以外に何も記載がありません。

少なくとも半角の#です。コード中に全角が混じらないように全角と半角が区別できるエディタを探されたほうが良いです。インデントも整えるようにしたほうが問題を発見しやすいですよ。

<style>
#my-table td,
#my-table th {
    border: 2px solid;
}
table#my-table {
    border: 2px solid;
    margin-bottom: 30px;
}
</style>
<table id="my-table">
    <tr>
        <th>名称</th>
        <td>fruvege株式会社</td>
    </tr>
    <tr>
        <th>住所</th>
        <td>東京都新宿区中新宿１－２－３</td>
    </tr>
    <tr>
        <th>電話</th>
        <td>０３－１１１１－２２２２</td>
    </tr>
    <tr>
        <th>創立</th>
        <td>2007年4月</td>
    </tr>
    <tr>
        <th>資本金</th>
        <td>500万円</td>
    </tr>
    <tr>
        <th>営業時間</th>
        <td>11時から19時まで</td>
    </tr>
    <tr>
        <th>メールでのお問い合わせ</th>
        <td>[e-mail]</td>
    </tr>
</table>

Comments

[ZZ-TOP]

ご解答ありがとうございます

以下の部分ですが、「td」と「th」とわけて、「,」でつなぐんですね。
×「#my-table td,th」と書いていました。

正解
#my-table td,
#my-table th {
border: 2px solid;

一度、質問を一度削除して
ガイドブックを読み返そうと思っていたところなので、助かりました。

今回は解答して頂き、ありがとうございます。
機会がありましたら、またお願いします。