table creating using span_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-23 23:57 出处：网络

I am trying to create one table using the <span> and <div> concept. But the table is not coming together properly. I couldn\'t find where the issue is. Please tell me what the problem is.

相关专题：css

I am trying to create one table using the <span> and <div> concept.

But the table is not coming together properly. I couldn't find where the issue is. Please tell me what the problem is. I have to produce 4 to 5 lines in a same row.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            .line1
            { 
               background-color:#AAAAAA;
               height: 150px;
               width: 1px;
               display: block;
            } 
            .line2
            { 
               开发者_Go百科background-color:#CE5611;
               height: 150px;
               width: 1px;
               display: block;
               margin-left: 121px;
            } 
        </style>
    </HEAD>    
    <body>
        <div id="a1" style='padding-left: 14px;width: 100px;'>
            <span>h1</span>
            <span class="line1"></span>
            <span>h2</span>
            <span class="line2"></span>
            <span>h3</span>
            <span class="line1"></span>
        </div>
    </body>
</html>

Instead this way of going :

<div id="a1" style='padding-left: 14px;width: 100px;'>
                <span>h1</span>
                <span class="line1"></span>
                <span>h2</span>
                <span class="line2"></span>
                <span>h3</span>
                <span class="line1"></span>
</div>

#wrapper .content{
  float:left
  width:100px;
  padding:.5em;
}

#wrapper .content span{
 font-weight:bold;
}


<div id="wrapper">
  <div class="content"><span>line 1</span></div>
  <div class="content"><span>line 2</span></div>
  <div class="content"><span>line 3</span></div>
</div>

you got the idea ..

Do you really want the classed spans to have display: block? That forces each one onto a seperate line. Functionally, <span style="display: block"> is kinda the same thing as <div> (and <div style="display: inline"> is kinda the same thing as <span>).

You're probably looking for display: inline-block. That gives you the ability to block attributes (height, width) like you are, but still leave it moving around within the surrounding contents. Another alternative is to use display: table-cell. There's a chart of display support here.

You should use a <table>.

I prefer using li and span tags instead of div and span. It makes manipulation much easier. With li as block and span inline-block.