【初學者發問】HTML 表格位置不對

html

mouse61033 2021-08-15 14:13:55 ‧ 2274 瀏覽

分享至

前輩們好～　
我是一名美編，是正在自學html的超級初心者，
前陣子看了一本網頁設計書，做了個簡單的網頁！

我的網頁裡有一個表格，
但用chrome開啟後總是出現在頁面最下方，
而不是我指定的段落，請問是我的語法漏寫了什麼嗎?

以下是該區段的內容 (架構很怪的話請多包涵)

       <p>貓貓最愛的磨爪板<a href="https://www.google.com.tw/">馬上看</a>!</p>
<!--為何表格不能放到正確這個段落 QAQ 會顯示在網頁最下面呢?-->
          <br>
          <table border="1">
           <tr>
             <th></th>
             <th>初階板板</th>
             <th>中階板板</th>
             <th>高階板板</th>
          </tr>
          <tr>
            <td rowspan="2">價格</td>
            <td>50元/個</td>
            <td>150元/個</td>
            <td>400元/個</td>
          </tr>
          <tr>
            <td colspan="3">團購優惠請洽客服</td>
          <br>
<!--請問我各位前輩，我前後語法有錯誤嗎-->
       <a href="https://www.google.com.tw/" target="_blank">
       <img src="../images/paw.jpg" alt="抓抓的貓貓">

前台的部分

因為怕是我整個寫法有問題，下方附上全部的內容
再麻煩各位前輩解答，謝謝 QAQ
完整內容

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

CherryYang

iT邦新手 4 級 ‧ 2021-08-15 14:30:49

最佳解答

我看了一下，你的程式碼出現了嚴重的問題！
你的表格語法不是完整的，你最核心的<table></table>少了結尾的</table> tag、<tr></tr>少了結尾的</tr> tag，這是非常嚴重的！因為你只要少打頭尾其中一個tag，程式就會出錯或保錯。
我建議你養成一個習慣，先把成對的tag打好，再打裡面的內容。
例如：
你應該要這樣寫<table>......</table>，
而不是這樣寫<table>......
這些供你參考：
https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Tables/Basics
https://www.fooish.com/html/table.html
https://www.wibibi.com/info.php?tid=116

甚至說，如果你的觀念穩固了，基礎功打好了，
你也可以直接用現成的線上工具生成表格，連結在此：
https://divtable.com/generator/

總而言之，請你加油～！我也是個新手，一起努力吧！

回應 2
分享
檢舉

mouse61033 iT邦新手 5 級 ‧ 2021-08-16 21:35:29 檢舉

謝謝你的分享～我會養成好習慣的！
原本是想找FB社團問問題，找不到但發現這裡～
結果是我自己太蠢啊啊啊我會加油的QAQ

CherryYang iT邦新手 4 級 ‧ 2021-08-16 23:22:38 檢舉

不客氣～要不我們加個FB好友吧？

登入發表回應

黃彥儒

iT邦高手 1 級 ‧ 2021-08-15 14:17:27

你表格的關閉標籤哪兒去了？

回應 1
分享
檢舉

mouse61033 iT邦新手 5 級 ‧ 2021-08-16 21:30:29 檢舉

嗚嗚我下次會注意QAQ

登入發表回應

海綿寶寶

iT邦大神 1 級 ‧ 2021-08-15 14:19:23

兩個問題
1.有 <table> 沒有 </table>
2.(Table 的最後一列)有 <tr> 沒有 </tr>
修正之後如下
看看是否 OK

<html lang="zh-Hant-TW">
  <head>
    <meta charset="UTF-8">
    <title>貓咪的真面目</title>
    <meta name="description" content="介紹貓咪喜歡的東西及日常生活">
  </head>

  <body>
      <h1>貓咪的一天</h1>
      <p>白天只會四處躺著</p>
      <a href="mailto:info@example.com">告訴我想知道的貓咪小秘密</a>
      <br>
      <img src="../cat1.jpg" alt="躺著的貓貓">
      <h2>貓咪的興趣</h2>
       <h3>最喜歡睡午覺!</h3>
       <ul>
           <li>早上睡覺</li>
           <li>中午睡覺</li>
           <li>下午睡覺</li>
           <li>晚上活蹦亂跳</li>
       </ul>
       <img src="../images/sleep.jpg" alt="睡覺的貓貓">
       <h3>需要磨爪板</h3>
       <p>抓的滿地都是碎屑</p>
       <p>貓貓最愛的磨爪板<a href="https://www.google.com.tw/">馬上看</a>!</p>
       <!--為何表格不能放到正確這個段落 QAQ
       會顯示在網頁最下面呢?-->
          <br>
          <table border="1">
           <tr>
             <th></th>
             <th>初階板板</th>
             <th>中階板板</th>
             <th>高階板板</th>
          </tr>
          <tr>
            <td rowspan="2">價格</td>
            <td>50元/個</td>
            <td>150元/個</td>
            <td>400元/個</td>
          </tr>
          <tr>
            <td colspan="3">團購優惠請洽客服</td>
          </tr>
          </table>          
       <a href="https://www.google.com.tw/" target="_blank">
       <img src="../images/paw.jpg" alt="抓抓的貓貓">
       </a>
       <h3>隨時都在舔毛~</h3>
       <p>每件衣服都是牠的毛</p>
         <h4>如何清掉貓毛?</h4>
         <ol>
           <li>買一個除塵滾輪</li>
           <li>買掃地機器人</li>
           <li>買一支靜電拖把</li>
         </ol>
         <form action="exampl.php" method="post" name="contact-from">
           姓名：
           <input type="text" placeholder="請輸入真實姓名">
           <br>
           電子郵件：
           <input type="email" placeholder="請不要用免費信箱">
           <br>
           性別：
           <input type="radio" name="gander" value="男"> 男
           <input type="radio" name="gander" value="女"> 女
           <input type="radio" name="gander" value="其他" checked> 其他
           <br>
           年齡：
           <select name="age">
              <option value="18歲以下">18歲以下</option>
              <option value="18到25歲">18到25歲</option>
              <option value="25歲到35歲">25歲到35歲</option>
              <option value="35歲到45歲">35歲到45歲</option>
              <option value="45歲到55歲">45歲到55歲</option>
              <option value="55歲到65歲">55歲到65歲</option>
              <option value="65歲以上">65歲以上</option>
           </select>
           <br>
           想知道的商品資訊：
           <input type="checkbox" name=product value=貓抓板 id="paw" checked>
           <label for="paw"> 貓抓板 </label>
           <input type="checkbox" name=product value=貓砂 id="sand">
           <label for="sand"> 貓砂 </label>
           <input type="checkbox" name=product value=玩具 id="toy">
           <label for="toy"> 玩具 </label>
           <input type="checkbox" name=product value=先不要 id="no">
           <label for="no"> 先不要 </label>
           <br>
           <textarea name="message" placeholder=輸入內容></textarea>
           <br>
           <input type="submit" value="送出">
         </form>
  </body>
</html>