网页制作 
首页 > 网页制作 > 浏览文章

CSS table 单行布局示例代码

(编辑:jimmy 日期: 2024/9/30 浏览:3 次 )

复制代码代码如下:
<html>
<head>
<mce:style type="text/css"><!--
table{border-collapse:collapse;}
td{border:1px blue solid;}
--></mce:style>
<style type="text/css" mce_bogus="1">
table{border-collapse:collapse;}
td{border:1px blue solid;}
</style>
</head>
<body>
<br/><br/><br/><br/>
<table width="50%" align="center">
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
</table>
</body>
</html>
<!-- table与tr背景色反色方式 -->
<html>
<head>
<mce:style type="text/css"><!--
table{background:#0000FF;}
tr{background:#FFFFFF;}
--></mce:style><style type="text/css" mce_bogus="1">
table{background:#0000FF;}
tr{background:#FFFFFF;}
</style>
</head>
<body>
<br/><br/><br/><br/>
<table width="50%" align="center" cellspacing="0">
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
<tr>
<td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
</tr>
</table>
</body>
</html>
上一篇:固定宽高且DIV绝对居中实现思路及示例
下一篇:火狐下easyui1.3.*弹出window框无法定位到中间问题解决