table creating using span
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>
do
#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.
加载中,请稍侯......
精彩评论