Mesaj #3122546 - Weismann21 - Html ile nasıl tablo yapılır?

//HTML


























  1. Bölüm
  2. Bölüm
  3. Bölüm
  4. Bölüm
  5. Bölüm
  6. Bölüm

//CSS



table,tr,td{width:200px;border:1px solid yellow;background-color:black;color:yellow;}
td{padding:20px;}
td:hover{cursor:pointer;color:red;}

//JQUERY



$(document).ready(function(){
	
  	$("#bolumler td").click(function(){
    
    $("#show-epsodie").remove();
    var data=$(this).attr("data");
    var frame='</frame>';<br/>    	$('#show-epsodie').attr('href', data);<br/>      $("#frame").append(frame);<br/>   	<br/>    });<br/><br/>});<br/><br/><br/></code><br/><br/>İşini görür umarım table>td'deki data kısmına bölümlerin adresi gelicek<br/><br/>Burdada test edebilirsin :<a href="https://jsfiddle.net/9u50qdfs/">https://jsfiddle.net/9u50qdfs/</a>  </div>
                        <div class="bottomInfo">
            <div class="left">
                                <a href="#" class="btn2 btn-sm like-unlike "><span class="icon"><i class="icon-like"></i></span></a>
                                <div class="show-likers">
                    <div>
                                            </div>
                    <p><span><span class="like-count">1</span> kişi</span> bu mesajı beğendi.</p>
                </div>
                            </div>
            <div class="right post-action-buttons">
                                                                <a href="#" class="btn2 btn-sm share-post">
                    <span class="icon"><span class="post-action-text">Paylaş</span> <i class="icon-share-fill"></i></span>
                </a>
            </div>
        </div>
    </div>
                </div>

    </div>
</div>
          
      

<footer>
                     <div class="container ads-container">
         <div class="row row-ads wmads2">
                           <div class="col "><a target="_blank" title="reklam" href="https://wmaraci.com/reklam"><img alt="reklam" src="https://cdn.wmaraci.com/img/wmreklam.jpg"></a></div>
                           <div class="col hideMobile "><a target="_blank" title="reklam" href="https://wmaraci.com/reklam"><img alt="reklam" src="https://cdn.wmaraci.com/img/wmreklam.jpg"></a></div>
                     </div>
         </div>
                  <div class="center">
      <div class="container">
         <div class="row">
            <div class="left">
               <img src="/assets/img/load.svg" data-src="/assets/img/logo.svg" width="176" height="36" alt="wmaraci">
               <strong>Copyright © 2010 - 2024</strong>
               <p>
                  WM Aracı, BTK onaylı bir yer sağlayıcı olarak içerikleri kontrol etme ya da araştırma yükümlülüğü yoktur. Hukuka aykırı olduğunu düşündüğünüz içerikleri lütfen bize bildiriniz.
               </p>
               <a href="/iletisim" class="btn btn-grey"><span class="icon"><i class="icon-exclamation"></i>Aykırı İçerik Bildir</span></a>
               <ul>
                  <li><a href="https://facebook.com/wmaraci" target="_blank" rel="nofollow" class="icon-facebook"></a></li>
                  <li><a href="https://twitter.com/wmaraci" target="_blank" rel="nofollow" class="icon-x"></a></li>
                  <li><a href="https://t.me/wmaraci" target="_blank" rel="nofollow" class="icon-telegram"></a></li>
                  <li><a href="https://www.youtube.com/wmaracicom" target="_blank" rel="nofollow" class="icon-youtube"></a></li>
                  <li><a href="https://www.instagram.com/wmaraci/" target="_blank" rel="nofollow" class="icon-instagram"></a></li>
               </ul>
            </div>
            <div class="right">
               <div class="row">
                  <div>
                     <strong class="head"><i class="icon-support"></i>Araçlar</strong>
                     <ul>
                        <li><a href="/whois">Whois Sorgulama</a></li>
                        <li><a href="#">SEO Analiz</a></li>
                        <li><a href="#">Site Analiz</a></li>
                        <li><a href="#">Sıra Bulucu</a></li>
                        <li><a href="/araclar">Kod/Tasarım Araçları</a></li>
                        <li><a href="/araclar">Site Araçları</a></li>
                     </ul>
                  </div>
                  <div>
                     <strong class="head"><i class="icon-layers"></i>WM Aracı Forum</strong>
                     <ul>
                        <li><a href="/yeni-ilanlar">İlanlar</a></li>
                        <li><a href="/yeni-konular">Konular</a></li>
                        <li><a href="/arama">Gelişmiş Arama</a></li>
                        <li><a href="/sikayet">Şikayetim Var</a></li>
                     </ul>
                  </div>
                  <div>
                     <strong class="head"><i class="icon-more"></i>Diğer Sayfalar</strong>
                     <ul>
                        <li><a href="/hakkimizda">Hakkımızda</a></li>
                        <li><a href="/premium">Premium Üyelikler</a></li>
                        <li><a href="/gizlilik-politikasi">Gizlilik Politikası</a></li>
                        <li><a href="/mesafeli-satis-sozlesmesi">Mesafeli Satış Sözleşmesi</a></li>
                        <li><a href="/teslimat-ve-iade">Teslimat ve İade Politikası</a></li>
                        <li><a href="/hukuka-aykirilik-bildirimi">Hukuka Aykırılık Bildirimi</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="bottom">
      <div class="container">
         <div class="row">
            <ul>
               <li><a href="/hakkimizda">Hakkımızda</a></li>
               <li><a href="/reklam">Reklam & İş Birlikleri</a></li>
               <li><a href="/iletisim">Bize Ulaşın</a></li>
            </ul>
            <div>
               <span>WM Aracı, <b>Cesur.NET İnternet Teknolojileri</b>'nde güvenle barınmaktadır.</span>
            </div>
         </div>
      </div>
   </div>
</footer>
<div id="footerMenu">
   <button style="z-index:1"><i class="icon-arrow-bottom"></i><i class="icon-arrow-top"></i></button>
   <ul>
      <li><a href="/"><i class="icon-home"></i>ANASAYFA</a></li>
      <li><a href="/forum"><i class="icon-layers"></i>FORUM</a></li>
            <li><a href="/giris"><i class="icon-account"></i>GİRİŞ YAP</a></li>
      <li><a href="/kayit"><i class="icon-plus-sign"></i>KAYIT OL</a></li>
         </ul>
</div>
</div>

<div id="mobileMenu">
   <div class="content">
      <div class="main">
         <a href="#" class="icon-times"></a>
         <div class="logined">
            <div>
                            &nbsp;
                          </div>
            <ul>
                              <li><a href="/giris"><i class="icon-account"></i><span>Giriş Yap</span></a></li>
               <li><a href="#" class="openSettings"><i class="icon-equalizer"></i><span>Site Ayarları</span><b class="icon-arrow-right"></b></a></li>
                           </ul>
         </div>
         <ul class="menu">
            <li><a href="/yeni-ilanlar"><i class="icon-shopping-basket"></i>İlanlar</a></li>
            <li><a href="/yeni-konular"><i class="icon-layers"></i>Konular</a></li>
            <li class="subs">
               <a href="#"><i class="icon-support"></i>Araçlar<span class="icon-down-arrow"></span></a>
               <ul class="vehicle">
                        <li>
                           <a href="/whois">
                              <i class="icon-folder-internet" style="color:#18C65D"></i>
                              <strong>Whois Sorgulama</strong>
                              Hızlı ve kolay bir şekilde whois sorgulama yapın.
                           </a>
                        </li>
                        <li>
                           <a href="/ip-class-sorgulama">
                              <i class="icon-abc-block" style="color:#0382FF"></i>
                              <strong>IP Class Sorgulama</strong>
                              Siteleri a, b ve c ip class'larına göre ayırın.
                           </a>
                        </li>
                        <li>
                           <a href="/cekilis-araci">
                              <i class="icon-number-list" style="color:#83CB6A"></i>
                              <strong>Çekiliş Aracı</strong>
                              Gelişmiş özelliklere sahip çekiliş aracı.
                           </a>
                        </li>
               </ul>
            </li>
         </ul>
         <ul class="sub">
            <li><a href="/forum">Forum</a></li>
            <li><a href="/kariyer">Kariyer</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/dizin">Dizin</a></li>
            <li><a href="/nedir">Nedir?</a></li>
         </ul>
      </div>
      <div class="settings">
         <a href="#" class="icon-times"></a>
         <div class="top">
            <a href="#" class="icon-arrow-left"></a>
            <strong>Site Ayarları</strong>
         </div>
         <ul>
            <li>
               <div>
                  <i class="icon-setting"></i>
                  <span>Tema Seçeneği</span>
                  <div>
                     <div class="switch switch-grey">
                        <input type="checkbox" id="switchMobileThema" >
                        <label for="switchMobileThema"><i class="icon-sun"></i><i class="icon-moon"></i></label>
                     </div>
                  </div>
               </div>
            </li>
            <li>
               <div>
                  <i class="icon-sound"></i>
                  <span>Site Sesleri</span>
                  <div>
                     <div class="switch switch-grey">
                        <input type="checkbox" id="switchMobileMute" class="toggle-user-permission" data-permission="permissionSound"  disabled>
                        <label for="switchMobileMute"><i class="icon-mute"></i><i class="icon-volume"></i></label>
                     </div>
                  </div>
               </div>
            </li>
            <li>
               <div>
                  <i class="icon-bell"></i>
                  <span>Bildirimler</span>
                  <div>
                     <div class="switch">
                        <input type="checkbox" id="switchMobileNotice" class="toggle-user-permission" data-permission="permissionNotification"  disabled checked>
                        <label for="switchMobileNotice"></label>
                     </div>
                  </div>
               </div>
            </li>
            <li>
               <div>
                  <i class="icon-bubble-speak"></i>
                  <span>Özel Mesaj Al</span>
                  <div>
                     <div class="switch">
                        <input type="checkbox" id="switchMobilePrivateMessage" class="toggle-user-permission" data-permission="permissionPm"  disabled>
                        <label for="switchMobilePrivateMessage"></label>
                     </div>
                  </div>
               </div>
            </li>
         </ul>
      </div>
   </div>
   <div class="overlay"></div>
</div>

<div class="pop" id="popLogin">
   <div class="content">
      <div>
         <div>
            <div class="content login">
               <div>
                  <div class="head3">
                     <h2>Üye Girişi Yap</h2>
                     <strong>Kullanıcı bilgileriniz ile üye girişi yapabilirsiniz.</strong>
                     <i class="icon-account"></i>
                     <a href="#" data-pop-close="#popLogin" class="icon-times2"></a>
                  </div>
                  <div class="form">
                     <div class="form-group icon phone">
                        <i class="icon-phone-call"></i>
                        <span>Telefon numaranız</span>
                        <input type="text" name="email" class="activate-autocomplete" style="padding-left: 75px">
                     </div>
                     <div class="form-group icon">
                        <i class="icon-key"></i>
                        <span>Şifreniz</span>
                        <input type="password" name="password" class="activate-autocomplete">
                        <b class="icon-eye"></b>
                     </div>
                     <div class="checkbox">
                        <input type="checkbox" name="rememberme" id="chckHistory" value="1">
                        <label for="chckHistory"><i class="icon-check"></i>Sonraki girişlerimde beni hatırla.</label>
                     </div>
                     <button class="btn btn-md login-btn"><span class="icon reverse">Üye Girişi Yap <i class="icon-arrow-right"></i></span></button>
                     <button class="btn btn-extra-light-grey btn-sm forgot-password"><span>Şifremi Unuttum!</span></button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="overlay"></div>
</div>

<div id="fixMessages"></div>

        <script src="/assets/js/cash.min.js"></script>
    <script src="/assets/js/build.js"></script>
    <script src="/assets/js/wma.js?2"></script>
    <script src="/assets/js/custom.js"></script>
    
    <script>
    $('input:not(.activate-autocomplete), form:not(.activate-autocomplete)').attr('autocomplete','new-password');
    $("#footerMenu button").on("click",function(e){
      if($("body").hasClass("openFooterMenu")){
        wma.setCookie('mobileFoterMenu', 'off');
      }else{
        wma.setCookie('mobileFoterMenu', 'on');
      }
    });
    $("#switchThema").on("change",function(){
      var darkMode;
      if($("#switchThema").prop("checked")){
        $("body").addClass("dark");
        wma.setCookie('darkMode', 'dark');
        darkMode = 1;
      }else{
        $("body").removeClass("dark");
        wma.setCookie('darkMode', '');
        darkMode = 0;
      }
      if (wm.user.userid) {
        wma.post('/profile/setDarkMode', {darkMode: darkMode}, function() {});
      }
    });
    $("#switchMobileThema").on("change",function(){
      var darkMode;
      if($("#switchMobileThema").prop("checked")){
        $("body").addClass("dark");
        wma.setCookie('darkMode', 'dark');
        darkMode = 1;
      }else{
        $("body").removeClass("dark");
        wma.setCookie('darkMode', '');
        darkMode = 0;
      }
      if (wm.user.userid) {
        wma.post('/profile/setDarkMode', {darkMode: darkMode}, function() {});
      }
    });
    $('#popLogin .forgot-password').on('click', function(e) {
      e.preventDefault();
      location.href = '/sifremi-unuttum';
    });
    $('#popLogin .login-btn').on('click', function(e) {
      e.preventDefault();
      var loginData = {
        email: $('#popLogin input[name="email"]').val(),
        password: $('#popLogin input[name="password"]').val(),
        rememberme: $('#popLogin input[name="rememberme"]').is(':checked')
      };
      wma.post('/auth/login', loginData, function(data) {
        if (data.status == 'success') {
          if (data.sms) {
            $('#popLogin [data-pop-close="#popLogin"]').trigger('click');
            wma.form({
              title: {
                  title: "Doğrulama Kodunu Girin",
                  subTitle: "Giriş için telefonunuza gönderilen kodu girin.",
                  icon: "icon-sms",
              },
              fields: {
                code: {
                  label: 'Doğrulama Kodu',
                  value: '',
                  type:  'text'
                }
              },
              callback: function(data) {
                var newData = loginData;
                    newData.code = data.code;
                wma.post('/auth/login', newData, function(d) {
                  if (d.status == 'success') {
                    location.href = location.href.replace('#', '');
                  } else {
                    wma.toast(d.title);
                  }
                });
              }
            });
            wma.activeModal.find('.content').css('width', '440px');
            wma.activeModal.find('button').text('Üye Girişi Yap');
            wma.activeModal.find('form').on('submit', function(e) {
              e.preventDefault();
              wma.activeModal.find('.mcuLoadingButton').trigger('click');
            });
          } else {
            localStorage.removeItem('fixedConversations');
            if (data.redirect == '/yeniden-degerlendir') {
              location.href = data.redirect;
            } else {
              location.href = location.href.replace('#', '');
            }
          }
        } else {
          wma.toast(data);
        }
      });
      return;
    });

    $('#popLogin input').on('keyup', function(e) {
      if (e.key == 'Enter') {
        $('#popLogin .login-btn').trigger('click');
      }
    });

    var notificationCount = localStorage.getItem('notificationCount') || 0;
    var conversationCount = localStorage.getItem('conversationCount') || 0;

        $('body').on('click', '.vn', function() {
      wma.post('/forum/setVisitorNotificationAsRead', {id: $(this).data('id')}, function(d) {});
    });
    $('body').on('click', '.start-popup-conversation', function(e) {
      e.preventDefault();
          return wma.toast('Üyeye özel mesaj göndermek için giriş yapmalısınız.');
    });
    
    
    
    
    
    
    
    
        
        var visitorNotificationTriggered = localStorage.getItem('visitorNotificationTriggered') || 0;
    if (!visitorNotificationTriggered) {
      setTimeout(function() {
        document.querySelector('.visitor-notifications').style.display = 'block';
      }, 3000);
      $(document).on('mouseup', function(e) {
        var container = $(".notice");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
          document.querySelector('.visitor-notifications').style.display = '';
        }
      });
      localStorage.setItem('visitorNotificationTriggered', 1);
    }
    
        </script>

    <script>
var thread = {
  threadId: '547343',
  categoryId: '57',
  title: 'Html ile nasıl tablo yapılır?',
  slug: 'html-ile-nasil-tablo-yapilir',
  categorySslug: 'html-css-xml',
  pollId: '',
  lastReplyAt: '2019-01-08 16:55:01',
  canReplyThread: false,
};
var jsVersion = 5;
$('.btn-share-thread').on('click', function(e) {
    e.preventDefault();
    $('.post-card .share-post').trigger('click');
});
</script>
<script src="/assets/js/thread/thread.min.js?8"></script>

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-8647194-20"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-8647194-20');
    </script>
</body>
</html>