iT邦幫忙

0

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

前輩們好~ 
我是一名美編,是正在自學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 }} |
{{ formatDate(item.duration) }}
直播中
2
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/

總而言之,請你加油~! 我也是個新手,一起努力吧!

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

不客氣~要不我們加個FB好友吧?

0
黃彥儒
iT邦高手 1 級 ‧ 2021-08-15 14:17:27

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

嗚嗚 我下次會注意QAQ

1
海綿寶寶
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>

謝謝你清楚的解答,我成功了嗚嗚嗚
前輩們人真好,結果是我沒打標籤
這問題好蠢 QAQ

我要發表回答

立即登入回答