如何将这个html表转换为div?

时间:2012-07-11 07:05:14

标签: html css

任何人都可以建议我如何将下面的html表转换为div?我试着做一些谷歌搜索,但无法找到具体的例子。如果有人能提供一些示例代码或指出我正确的方向,我将不胜感激。

由于

<table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tbody>   

                <tr>
                    <td colspan="3">
                        List of news
                     </td>
                </tr> 
                <tr>
                    <td width="20%">
                        Title
                    </td>
                    <td width="5%">
                        :
                    </td>
                    <td width="75%">
                        Name of title
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        Description
                    </td>
                    <td valign="top">
                        :
                    </td>
                    <td valign="top">
                        Content of description
                    </td>
                </tr>
            </tbody>
            </table> 

2 个答案:

答案 0 :(得分:2)

现场演示:http://jsfiddle.net/satinder_singh1/TdAWY/

带内容的演示 http://jsfiddle.net/satinder_singh1/TdAWY/1/

<div class="headDiv">
        <div class="c1 w1" >
            sd
        </div>
        <div class="c1 w20">s
        </div>
        <div class="c1 w5"> s
        </div>
        <div class="c1 w75">s
        </div>
         <div class="c1 w20">s
        </div>
        <div class="c1 w5"> s
        </div>
        <div class="c1 w75">s
        </div>

    </div>​

.c1
{
float:left;

}

.headDiv
{
width:100%;
border:1px soild blue;
}
.w75
{
width:75%;
height:50px;

border-bottom:1px solid;
}
.w20
{
width:20%;
height:50px;

border-bottom:1px solid;
}
.w5
{
width:5%;
height:50px;
background-color:Yellow;
border-bottom:1px solid;
}

.w1
{
width:100%;
height:50px;
background-color:pink;
border-bottom:1px solid;
}

答案 1 :(得分:-1)

使用tabletodivconverter.com/将html表格转换为div。