谁可以给我一个用CSS做好的表格代码啊?最好是两行四列的

表格 表格 表格 表格 表格 表格 表格 表格 我都做了注释了,你复制到记事本中,改下后缀名,打开看下效果!如果懂CSS的话一看就明白了
谁可以给我一个用CSS做好的表格代码啊?最好是两行四列的
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用CSS做表格</title>
<style type="text/css">
ul{padding:0;
width:324px; /*设置表格宽 */
height:42px;/*设置表格高*/
margin:30px;
border-top:red 1px solid;/*设置表格上边框*/
border-right:red 1px solid;/*设置表格右边框*/
}
li{ border-left:red 1px solid;/*设置表格左边框*/
border-bottom:red 1px solid;/*设置表格下边框*/
/*设置单元格边框*/
list-style:none;/*清除项目列表前的标记*/
float:left;/*设置单元格浮动,用于水平排列*/
display:block;/*设置单元格为块级元素于用语控制大小等*/
width:80px;/*设置单元格宽*/
height:20px;/*设置单元格高*/
text-align:center;/*设置单元格内文本对齐方式*/
}

/*原理就是利用项目列表的每个项目做出表格中的每个单元格,然后通过设置ul和li的边框达到设置表格的边框效果*/
</style>
</head>
<body>

<ul>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
</ul>
</body>
</html>
我都做了注释了,你复制到记事本中,改下后缀名,打开看下效果!
如果懂CSS的话一看就明白了2013-11-10
不太明白你的意思.
CSS可以定义table 的样式等,但他不是制作table的.table也就是表格,他是html语言的一个标志
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

这是一个2行四列的表格2013-11-10
表格的:cellspacing="0" cellpadding="0"

table{
margin:0px;
padding:0px;
}
table td{
margin:0px;
padding:0px;
}
至于边框,是table 上左,table td 是下右,就可以 了2013-11-10
自己研究研究一下
===========================
<!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" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0;padding:0;}
div{width:910px;border-top:1px solid black;border-left:1px solid black;background:#B1B1B1;}
div li{width:100px;float:left; list-style:none;height:20px;border-bottom:1px solid black;border-right:1px solid black;}
</style>
</head>
<body>
<div>
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
</body>
</html>2013-11-10
mengvlog 阅读 11 次 更新于 2025-07-20 16:22:46 我来答关注问题0
  • 首先,你需要设计好你的HTML结构。你可以创建一个表格来容纳课程表的内容。每行可以代表一天,每列可以代表一节课。在HTML中,你可以使用标签来创建表格。例如: 时间 周一 周二 周三 周四 周五 8:00-9:00 数学 语文 英语 物理 化学 9:00-10:00 语文 化学 物理 英语

  • />重置按钮<inputtype="button"name="button"/>创建一个可单击的按钮,一般用于JS的运行。5、下列为HTML5新增input类型<inputtype="email"name="email"/>email输入框<inputtype="url"name="url"/>url地址输入框<inputtype="number"name="number"min="0"max="20"step="4"/>数字输入框,其...

  •  勤奋的小号007 用纯DIV+CSS做一个两行两列的表格,但第二列中两行是合并的,如下面这样

    1 2 3 总体思路就是利用宽度和浮动来实现,给ul一个固定的宽度,第一行显示的li平分这个宽度,后面的li因为没有位置就自动去了第二行,让它独占一行,就可以实现这个效果。以上,希望对你有帮助。

  •  文暄生活科普 用css3制作一个精美的在线时钟

    前两天我翻阅资料时,发现了一个我刚开始学习前端时做过的简单案例,用CSS来制作一个旋转的时钟表盘。这个效果是完全用CSS实现的,因为表针的旋转规律明确,仅需设置一个定时动画即可。为了简化代码并能获取当前时间,我使用了JavaScript进行优化。案例简单,所以直接使用原生代码,无需引入框架。开发流程从初...

  • anonymous 如何用CSS 定制表格单元格的宽度和高度

    CSS中宽度和高度分别可以通过width和height实现,那么对于单元格的宽度和高度,则可以通过如下样式来设置 td{ width:100px; height:50px;} /*设置单元格宽度100px,高度50px*/示例如下:给出HTML元素 1234567891011设置单元格高度和宽度样式 table{border-collapse:collapse;}td{border: 1px solid gre...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部