CSS建立表格代码

最新推荐文章于 2024-05-14 16:52:58 发布
最新推荐文章于 2024-05-14 16:52:58 发布
阅读量493 收藏
点赞数
文章标签： CSS XHTML HTML
CSS建立表格代码，不用传统的tr代表行，td代表列
<!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=gb2312" />
<title>CSS建立表格代码www.cssjiaocheng.cn</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
color:#000;
}
#table {
width:405px;
margin:50px auto;
}
#table li,#table li.header {
list-style-type:none;
width:100px;
height:30px;
line-height:30px;
text-align:center;
float:left;
margin-left:1px;
margin-bottom:1px;
background:#ccc;

}
#table li.header {
background:#999;
}
</style>
</head>

<body>

<ul id="table">
<li class="header">第一列</li>
<li class="header">第二列</li>
<li class="header">第三列</li>
<li class="header">第四列</li>
<li>数据1-1</li>
<li>数据1-2</li>
<li>数据1-3</li>
<li>数据1-4</li>
<li>数据2-1</li>
<li>数据2-2</li>
<li>数据2-3</li>
<li>数据2-4</li>
<li>数据3-1</li>
<li>数据3-2</li>
<li>数据3-3</li>
<li>数据3-4</li>
<li>数据4-1</li>
<li>数据4-2</li>
<li>数据4-3</li>
<li>数据4-4</li>
</ul>
</body>
</html>
iteye_6481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
零基础CSS入门教程(17)–表格样式
程序员大阳
10-30 6395
点此查看全部文字教程、视频教程、源代码 本文目录1. 题外话2. 前言3. HTML表格边框4. CSS设定表格边框5. 设定列边框6. 折叠边框7. 表格尺寸8. 表格内边距9. 表格背景色10. 小结 1. 题外话 不知不觉，写到第40篇了。 可能已经是我写过的最长的系列文章了，虽然质量有时比较好，有时比较差，但我总体对该系列文章比较满意。 因为它寄托了我的心思，也帮我在达成目标的路上，一点一滴的前进。 如果说目标是什么，就是为热爱计算机专业、热爱计算机技术的初学者，特别是我的学生，提供一个渠道。我们在
html css div开发table表格
bluemengcom的博客
06-11 1204
html css div开发类似table表格
CSS 基础教程：表格（一）
最新发布
m0_65012566的博客
05-14 578
表格是一个HTML元素，用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>标签创建，并且可以使用CSS属性进行样式设置。本章讨论如何使用CSS设置HTML表格的不同属性。首先看看下面的示例，它演示了一个简单的HTML表格：</</</</</</</</</</</</</</</</</</上述示例中的表格是数据的简单显示，可以使用CSS进行样式设置。widthheighttext-alignborder让我们看看如何在以下各节中使用这些属性的示例。
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
CSS简介代码实现表格(table)只有横线没有竖线的效果，一个简约卡片化精美的数据表格(类似Bootstrap表格)
王佳斌
11-23 1万+
实现效果 简单来说先设置 table 的 border-collapse:collapse，把表格整体边框取消。然后设置 table,th,tr,td 底部边框线即可。 HTML： <table> <tr> <th>编号(ID)</th> <th>名称(Name)</th> &lt...
css之表单、表格
noveto的博客
11-17 319
【代码】css之表单、表格。
纯CSS3表格美化特效特效代码
03-20
本主题关注的是"纯CSS3表格美化特效特效代码"，这是一个利用CSS3特性对传统HTML表格进行视觉增强的方法。下面将详细探讨如何通过CSS3实现表格的美化，以及涉及到的关键技术点。 首先，CSS3中的选择器是实现表格美化...
div css汽车销售表格样式代码
07-24
通过分析这个文件，我们可以深入理解如何应用 `div` 和 `CSS` 来创建一个具有专业视觉效果的汽车销售表格。 在实际开发中，这样的代码实例对于网页设计师和前端开发者来说非常有价值，它展示了如何将复杂的销售数据...
漂亮的CSS立体表格效果特效代码
03-20
标题中的“漂亮的CSS立体表格效果特效代码”是指利用CSS（层叠样式表）技术来创建具有立体感的表格效果。CSS是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言，它允许我们将样式与结构分离，...
css控制表格细边框样式
09-25
在网页设计中，CSS（Cascading Style Sheets）是一种强大的工具，用于定义和控制页面元素的外观和布局。...总之，通过灵活运用CSS，我们可以完全定制表格的细边框样式，打造符合设计需求的美观表格。
css制作表格
u011927449的博客
08-31 1489
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> <style> *{ margin: 0; padding: 0; } table{ width: 100%; height: 120px; margin:10px auto 0; table-layou.
css创建表格
tj45678的博客
11-06 1085
function cretable(){             var sumLine=document.getElementById("line").value;                 var sumcol=document.getElementById("col").value;                    var f=document.forms[0];   
CSS中的表格(一)
xvzhengyang的博客
03-05 6018
如何使用HTML来完成一个表格? &lt;table&gt;元素专门负责标记表格数据. &lt;tr&gt;每个tr元素构成表格中的一行 &lt;th&gt;每个th元素分别是某一列的表头;浏览器默认的会用粗体来表示表头. &lt;td&gt;每个td元素包含表格中的一个单元格,每个单元格分别构成一个单独的列;包含一个表格数...
CSS 表格
GarfieldEr007的专栏
12-09 1696
CSS 表格属性可以帮助您极大地改善表格的外观。 表格边框 如需在 CSS 中设置表格边框，请使用 border 属性。 下面的例子为 table、th 以及 td 设置了蓝色边框： table, th, td { border: 1px solid blue; } 亲自试一试 请注意，上例中的表格具有双线条边框。这是由于 table、th 以
HTML+CSS实现课程表
matafeiyanll的博客
06-27 1688
HTML+CSS实现课程表 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{ border: 4px solid orange; margin: 0 auto; border-spacing: 0; width: 6
table表格的一个css代码
玛尼的博客
04-13 679
function altRows(id){ if(document.getElementsByTagName){   var table = document.getElementById(id);   var rows = table.getElementsByTagName("tr");    for(i = 0; i if(i % 2 == 0){ rows[i].cla
web网页制作表格
fbbing123的博客
12-12 5795
姓名： 性别：  男  女 政治面貌：  党员   团员   群众  学院：  计算机  艺术  商  管理  理 选修课程：  C++  C#  Java  SQL 其他课程：  
mysql新建表代码
Silly011的博客
07-29 3738
完整的创建代码 create table orders( orderId int primary key auto_increment not null comment '订单编号', userId varchar(20) not null comment '所属用户编号', businessId int not null comment '所属商家编号', orderDate varchar(20) not null comment.
网页表格源代码----个人简历
weixin_34250434的博客
04-30 753
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>刘聪聪信息</title> <style type="text/css"> body{ margi...
用css编写一个表格代码
06-09
在这个表格中，我们使用了`<table>`元素来创建表格，使用`<thead>`元素和`<th>`元素来创建表头行和表头单元格，使用`<tbody>`元素和`<tr>`元素来创建多行数据和每行的单元格。可以使用CSS来控制表格的样式，例如，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值