Cell spacing in fake cell table CSS?

Question:

Lera Dmytriw

2012-01-27 16:05:21 UTC

I'm trying to code my site but I've been looking for cellspacing codes when I realised that what I'm using is basically a fake table column thing.

The code at the beginning is:

I'm trying to figure out how to add cell spacing though as the columns are all close together.

Three answers:

2012-01-27 21:59:46 UTC

Use margins for spacing between cells. Padding for spacing inside a cell.

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design

Why tables for layout is stupid: http://www.hotdesign.com/seybold/

How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/how-convert-manually-your-html-tables-css

Basic Tables [Bad Examples!]: http://www.yourhtmlsource.com/tables/basictables.html

Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Between the head tags of each page:

CSS Tutorials:

Advanced CSS: http://www.yourhtmlsource.com/stylesheets/advancedcss.html

http://www.handycss.com/

http://www.w3.org/Style/Examples/011/firstcss

http://www.csstutorial.net/

Dynamic Drive CSS Library: http://www.dynamicdrive.com/style/

More...

2016-10-06 16:01:30 UTC

What approximately utilising a textarea container with a collection sort of rows and columns this might make a scroll bar interior the cellular of the table reason the container could have a collection length and could make a scrollbar for the overflow that would not in high-quality condition the specified length of the text fabric section and you will upload extra coding for a historic past shade?

text fabric in heree16e6f718e15844a79cd8dafcca98de              
            </div>
            
            
            
                        </div>
            
        
        
      </div>
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
            
      
      
      
      
      
      
          
          
          
      
      <div class="qa_answer " >
        
        
                    
          <div class="qa_post_head">
            <div class="post" id="post2">
              <div class="post_header">
                
                                
                  <div class="ya_post_header_poster">
                                      </div>
                  
                                <div class="post_header_date">
                  <span class="timeago" title="2012-01-27T10:07:24-06:00">2012-01-27 16:07:24 UTC</span>
                </div>
                
              </div>
            </div>
          </div>
        
        
        
          
          <div class="qa_post_content_body">
          
          
          
          
          
          
          <div class="post_body parsed">
            <div class="post_actions">
              
                            
              
          
              
              
            </div>
          
              
              http://www.w3schools.com/tags/att_table_cellspacing.asp              
            </div>
            
            
            
                        </div>
            
        
        
      </div>
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
            
      
      </br ></br >
      
      <div id="se_licensing_notice">
        <div id="se_licensing_notice_info">
        ⓘ
        </div>
        
        <div id="se_licensing_notice_text">
        This content was originally posted on Y! Answers, a Q&A website that shut down in 2021.          
         
          
        
        </div>
      </div>

<script type="text/javascript">
			
			
			
			
    		//$(document).ready(function() {
	    		
	    		(nk = window.nk || []).session_id = '6c01fb7f03c3';
	    		
	    		if(nk.adb === undefined)
	    			nk.adb = 'enabled';
            
          if(0)
            nk.adb = 'untested';
	    			    		
	    		nk.threadfunction = function() {
		    		$.ajax({
    		  			url: "https://" + document.domain +"/ajax/ThreadViewCounter?hash=Jn48EQd4&nk_session=" + nk.session_id,
    		  			data: {
	    		  			
	    		  			page_version: 1,
	    		  			is_desktop: 1,
	    		  			lang: 'en',
	    		  			replycount: 3,
	    		  			views: 1,
	    		  			
	    		  			type: 'ya',
	    		  			
	    		  			simqa: 0,
	    		  			simsearchqa: 0,
	    		  			simsearch: 0,
	    		  			
	    		  			url: window.location.href,
	    		  			hash: 'Jn48EQd4',
	    		  			cat: document.domain.replace('.narkive.', '.'),
	    		  			path: window.location.pathname,
	    		  				    		  			
	    		  			title: 'Cell spacing in fake cell table CSS?',
	    		  			
	    		  			
	    		  			recency: 3059,
	    		  			
	    		  				    		  			ads_filter: 'no-match',
	    		  				    		  			
	    		  		//	adb: nk.adb,
	    		  			
	    		  			
	    		  			
	    		  			
    		  			},
    		  			cache: true,
    		  			type: "GET"
    			})
    			  .done(function( html ) {
				    eval(html);
				  });
	    		}
    		    
            //});
            
            $(document).ready(function() {
	            if(typeof adsense_dispatcher_id === 'undefined' || adsense_dispatcher_id < 2)
	            {
		            // disable stats collection if you're unlikely to be a new user
		            //nk.threadfunction();
	            }
	        });
	        
	        
	        // prebid callback here as there is no command queue, in theory ThreadViewCounter works, but hey
	        
	        
	        var nk_ts_PreBidConnectionTime = Date.now();
	        
	        
	        function connect_prebid_callback() 
	        {
				if(typeof vmpbjs !== undefined && vmpbjs.onEvent !== undefined)
				{	
					vmpbjs.onEvent('bidWon', function(prebidwin) {
					console.log(prebidwin.bidderCode+ ' won the ad server auction for ad unit ' +prebidwin.adUnitCode+ ' at ' +prebidwin.cpm+ ' CPM');
					console.log(prebidwin);
					
					var u = "https://" + document.domain +"/ajax/telemprebid?abs_sec=" + parseInt((Date.now()-nk_ts_PreBidConnectionTime) / 1000) + "&nk_session=" + nk.session_id;
				        
					$.ajax({  url: u, cache: false, type: "HEAD", global: false, beforeSend: function(){}, complete: function(){},  data: {
					    
					    bidder: prebidwin.bidder,
					    cpm: prebidwin.originalCpm,
					    currency: prebidwin.originalCurrency,
					    height: prebidwin.height,
					    width: prebidwin.width,
					    slotElementId: prebidwin.adserverTargeting.hb_div_id
					
					}});
					
					console.log('callback sent');
					
				    });
				}	
				else
				{
					setTimeout(function() {
						connect_prebid_callback();
					}, 100);
				}  
			}
			  
			//connect_prebid_callback();
			  
			  
			  
			  
		</script>

</style>

.post_header {
    border-width: 1px;
    border-radius: 3px;
}

.post_wrapper {
    border-left: 0; 
    padding-left: 22px;
}

.post_body {
	border: 0;
}

.quoted_post {
    font-size: 14px;
    line-height: 18px;
}

.post_header {
    height: 30px;
    line-height: 30px;
    font-size: 17px;
}

#thread_lister_ctrl_nav {
    font-size: 24px;
    line-height: 32px;
}

#thread_lister_subtitle {
	display: none;
}

/* smaller */

#thread_lister_ctrl_nav {
    font-size: 20px;
    line-height: 31px;
}

.post_header {
    height: 28px;
    line-height: 27px;
    font-size: 16px;
}

.post_body.parsed {
    font-family: "Segoe UI","Segoe WP","Arial","Sans-Serif";
    font-size: 17px;
    line-height: 25px;
    padding-bottom: 16px;
}

.thread #thread_lister_ctrl {
    margin: 8px 4px;
    margin-top: 7px;
    margin-bottom: 4px;
}

#thread_lister_subtitle {
	display: block;
}

#thread_lister_subtitle {
	margin-bottom: -5px;
}

#thread_container .post_header_date .timeago {
	font-size: 15px;
}

#simthread_first_header {
    font-family: serif;
    font-size: 25px;
    margin-top: 30px;
    margin-left: 15px;
    background-color: #f3feff;
    padding: 7px 13px;
    color: #234244;
    width: fit-content;
    border-radius: 5px;
}

}

</style>

@media screen and (min-width: 1500px) {

#sidebar_banner_right {
    margin-left: 80px;
}

}

</style>

</div>

</div>

var nav_highlighted = false,
    sidebar_fixed = false,
    sidebar_initial_top_distance = 0,
    sidebar_initial_left_distance = 0,
    sidebar_right_banner_initial_left_distance = 0,
    last_post_divs_distance_build = 0,
    post_divs_distances = Array(),
    sidebar_height = 0,
    thread_navigation_height = 0,
    sidebar_position_offset = 0,
    thread_onscroll_timeout = 0,
    sidebar_related_height = 0;

function build_post_divs_distance()
{
    if(new Date().getTime() - last_post_divs_distance_build < 1000)
    {
        return;
    }

var post_divs = $('.post');

for(k in post_divs)
    {
        if(parseInt(k) != k)
            continue;
        post_divs_distances[$(post_divs[k]).position().top] = $(post_divs[k]).attr('id').replace('post', '');
    }
    sidebar_height = $('#sidebar_container').height();
    thread_navigation_height = $('#thread_navigation').height();
}

function thread_onscroll()
{
    if($(window).width() < 995)
    {
        return;
    }

build_post_divs_distance();

var scroll_top = $(window).scrollTop(),
    sidebar_offset_top = $('#sidebar_container').offset().top,
    windows_height = $(window).height(),
    sidebar_css_top = parseInt($('#sidebar_container').css('top') == 'auto' ? 0 : $('#sidebar_container').css('top')),
    sidebar_standard_top_distance = 20,
    first_visible_post = 1,
    scroller_margins = windows_height < 250 ? 20 : 100;
    highlighted_top_distance = nav_highlighted > 0 ? $('#nav_post' + nav_highlighted).position().top : windows_height/2;
    left_margin = parseInt($('#sidebar_container').css('margin-left'));
    left_margin_banner = parseInt($('#sidebar_banner_right').css('margin-left'));
    
    if(sidebar_initial_left_distance == 0)
    {
        sidebar_initial_left_distance = $('#sidebar_container').offset().left/* == 0 ? 760 : $('#sidebar_container').offset().left*/;
    }
    
    if(sidebar_right_banner_initial_left_distance == 0)
    {
        sidebar_right_banner_initial_left_distance = $('#sidebar_banner_right').offset().left/* == 0 ? 760 : $('#sidebar_container').offset().left*/;
    }

if(highlighted_top_distance + scroller_margins + sidebar_position_offset + sidebar_related_height > windows_height)
    {
        sidebar_position_offset -= windows_height/2;
        $('#sidebar_container').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_initial_left_distance - left_margin) + 'px');
        $('#sidebar_banner_right').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_right_banner_initial_left_distance - left_margin_banner) + 'px');

}
    else if(highlighted_top_distance + sidebar_position_offset < scroller_margins)
    {
        sidebar_position_offset += windows_height/2;
        $('#sidebar_container').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_initial_left_distance - left_margin) + 'px');
        $('#sidebar_banner_right').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_right_banner_initial_left_distance - left_margin_banner) + 'px');
    }
    else if(!sidebar_fixed && scroll_top + sidebar_standard_top_distance > sidebar_offset_top)
    {
        $('#sidebar_container').css('position', 'fixed').css('top', '0px').css('left', (sidebar_initial_left_distance - left_margin) + 'px');
        $('#sidebar_banner_right').css('position', 'fixed').css('top', '0px').css('left', (sidebar_right_banner_initial_left_distance - left_margin_banner) + 'px');

sidebar_fixed = true;
        sidebar_initial_top_distance = sidebar_offset_top;
    }
    else if(sidebar_fixed && scroll_top + sidebar_standard_top_distance < sidebar_initial_top_distance)
    {
        $('#sidebar_container').css('position', 'relative').css('top', '0').css('left', '0');
        $('#sidebar_banner_right').css('position', 'relative').css('top', '0').css('left', '0');
        sidebar_fixed = false;
    }

for(k in post_divs_distances)
        if(k < scroll_top + 100 && post_divs_distances[k] != 'selector')
            first_visible_post = parseInt(post_divs_distances[k]);

if(first_visible_post > 0 && first_visible_post <= post_divs_distances.length + 1)
    {
        $('#nav_post' + nav_highlighted).css('opacity', '');
        $('#nav_post' + first_visible_post).css('opacity', '1');
        nav_highlighted = first_visible_post;
    }

clearTimeout(thread_onscroll_timeout);
    thread_onscroll_timeout = setTimeout(function () {thread_onscroll();}, 200);
}

function init_quoted_extra()
{
    $(".quoted_post_level_1").each(function() {
        if($(this).text().length < 500)
            return;

if($(this).next('.quoted_extra_clickable').length != 0)
            return;

$(this).css('display', 'none');
        $(this).after('<div class="quoted_extra_clickable">...</div>');
    });
}

function quoted_extra_click(e)
{
    $(e).css('display', 'none');
    $(e).prev().css('display', 'block');

build_post_divs_distance()
}

$( document ).ready(function() {
  
  
  $(".post_censored").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    
    var post_id = $(this).closest(".post").attr('id').replace('post', '');
    console.log(post_id);
    censored_post = $(this).closest(".post_body");
    
    $(this).closest(".post_body").css('opacity', '0.3');
    
    
    /*
    $.ajax({
       url: "?load_censored_post=" + post_id,
       type: 'GET',
       dataType: 'html',
       success: function(data){
         console.log(nk.censored_post);
         nk.censored_post.html(data);
       }
   });
   */
   
   $.post(window.location, {'load_censored_post': post_id}, function(data) {
    // alert('POST was successful. Server says: ' + data);
    console.log(censored_post);
     $(censored_post).html(data);
     $(censored_post).css('opacity', '1');
   });
   
   
   
});

});

function thread_selector_mouseup()
{
    
}

function thread_init_selection()
{
    if(!window.location.hash || !window.location.hash.match(/^#selection:([0-9]+)\.([0-9]+)\.([0-9]+)$/))
        return;
    
    nk.is_select_ref = 1;
    
    var temp = window.location.hash.match(/^#selection:([0-9]+)\.([0-9]+)\.([0-9]+)$/);
    var post = temp[1], start = temp[2], end = parseInt(start) + parseInt(temp[3]), ts, tr;

tr = $('#post' + post).children('.post_body').html().trim();
    
    ts = '<div>' + $('#post' + post).children('.post_body').html().trim() + '</div>';
    ts = $(ts);
    ts.find('.quoted_post').remove();
    ts.find('.post_signature').remove();
    //ts.find('#selection_url_f').remove();
    ts.find('br').replaceWith(' ');
    ts = ts.html().trim();
    
    var post_verified = '', c;

for (var i = 0; i < ts.length; i++)
    {
        if(i < start || i >= end)
            continue;
        
        c = ts.charAt(i);
        post_verified += c;
        
        if(c != ' ')
            continue;
        
        if(tr.indexOf(post_verified) != -1)
            continue;
            
        post_verified = post_verified.slice(0, -1);
        
        if(tr.indexOf(post_verified + '<br>') != -1)
        {
            post_verified += '<br>';
            continue;
        }
        
        break;
            
    }
    
    $('#post' + post).children('.post_body').html( $('#post' + post).children('.post_body').html().replace(post_verified, '<span id="init_selection">' + post_verified + '</span>') );
    var offset = (window.innerHeight < $("#init_selection").height()) ? 30 : ((window.innerHeight - $("#init_selection").height()) / 2);
    $('html,body').animate({scrollTop: $("#init_selection").offset().top - offset},'fast');
    
    ga('send', 'event', 'selection', 'load', {'nonInteraction': 1});

}

});
}

/*
function thread_similarbar(hash)
{
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent))
        return;
        
    $.get( "https://" + document.domain + "/ajax/similarbar?hash=" + hash, function( data ) {
        $('#thread_navigation').after(data);
    });      
}
*/

function thread_suggested_reading(hash)
{
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent))
        return;
        
    $.get( "https://" + document.domain + "/ajax/suggestedreading?hash=" + hash, function( data ) {
        $('#thread_container').append(data);
    });      
}

$( window ).scroll(function () { thread_onscroll(); });
$( document ).ready(function() { init_quoted_extra(); thread_onscroll(); /*thread_check_adv();*/ thread_init_copy(); thread_init_selection(); });
</script>

</style>

$( document ).ready(function() {
  
  
  
  var targetNodes         = $(".adsbygoogle");
  var MutationObserver    = window.MutationObserver || window.WebKitMutationObserver;
  var myObserver          = new MutationObserver (mutationHandler);
  var obsConfig           = { attributes: true };
  
  targetNodes.each ( function () {
    myObserver.observe (this, obsConfig);
  } );
  
  function mutationHandler (mutationRecords) {  
    mutationRecords.forEach ( function (mutation) {
      if(mutation.type == 'attributes' && mutation.attributeName == 'data-ad-status') {
        
        var jq = $(mutation.target).attr('data-ad-status');
        
        if(jq == 'filled') {
          nk.adsense_status.filled++;
        }
        if(jq == 'unfilled') {
          nk.adsense_status.unfilled++;
        }
        
        nk.ts_suggestPushEvent = 1;
        
      }
    } );
  }
  
  
    var testURL = "https://" + document.domain + "/s/_adverts.js"
  
    var myInit = {
      method: 'HEAD',
      mode: 'no-cors'
    };
  
    var myRequest = new Request(testURL, myInit);
  
    fetch(myRequest).then(function(response) {
      return response;
    }).then(function(response) {
      nk.adb = 'disabled';
      nk.ts_suggestPushEvent = 1;
    }).catch(function(e){
      nk.adb = 'enabled';
      nk.ts_suggestPushEvent = 1;
    });
    
    
  
  
  
  
});
 
</script>

<div id="footer_wrapper">
<div id="footer_links">
<a href="https://narkive.com/about">about</a> - <a href="https://narkive.com/legalese">legalese</a>
</div>

<!--
<div id="lang_selector">
<div id="lang_select">Contents in English</div>

<a href="?set_lang=zh-cn" class="lang_select_bit">Chinese</a><a href="?set_lang=zh-tw" class="lang_select_bit">Chinese</a><a href="?set_lang=hr" class="lang_select_bit">Croatian</a><a href="?set_lang=cs" class="lang_select_bit">Czech</a><a href="?set_lang=da" class="lang_select_bit">Danish</a><a href="?set_lang=nl" class="lang_select_bit">Dutch</a><a href="?set_lang=en" class="lang_select_bit">English</a><a href="?set_lang=et" class="lang_select_bit">Estonian</a><a href="?set_lang=fi" class="lang_select_bit">Finnish</a><a href="?set_lang=fr" class="lang_select_bit">French</a><a href="?set_lang=de" class="lang_select_bit">German</a><a href="?set_lang=el" class="lang_select_bit">Greek</a><a href="?set_lang=he" class="lang_select_bit">Hebrew</a><a href="?set_lang=hi" class="lang_select_bit">Hindi</a><a href="?set_lang=hu" class="lang_select_bit">Hungarian</a><a href="?set_lang=id" class="lang_select_bit">Indonesian</a><a href="?set_lang=it" class="lang_select_bit">Italian</a><a href="?set_lang=ja" class="lang_select_bit">Japanese</a><a href="?set_lang=ko" class="lang_select_bit">Korean</a><a href="?set_lang=no" class="lang_select_bit">Norwegian</a><a href="?set_lang=pl" class="lang_select_bit">Polish</a><a href="?set_lang=pt" class="lang_select_bit">Portuguese</a><a href="?set_lang=ru" class="lang_select_bit">Russian</a><a href="?set_lang=sr" class="lang_select_bit">Serbian</a><a href="?set_lang=es" class="lang_select_bit">Spanish</a><a href="?set_lang=sv" class="lang_select_bit">Swedish</a><a href="?set_lang=th" class="lang_select_bit">Thai</a><a href="?set_lang=tr" class="lang_select_bit">Turkish</a><a href="?set_lang=vi" class="lang_select_bit" style="border-bottom: none;">Vietnamese</a>	
	</div>
	
	<div id="lang_select_cont_end"></div>
	
</div>

</div>
-->

</div>

<div id="ajax_loading">Loading...</div>