How to implement irregular tables in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to implement irregular tables in css

藏色散人

Apr 19, 2021 am 09:11 AM

css

How to implement irregular tables in css: first create an HTML sample file; then create a table through the table tag; then set the style of the table through attributes such as width and height; finally set the table through attributes such as text-align Just text style.

How to implement irregular tables in css

## Operating environment for this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.

HTML text:

<!DOCTYPE html><html>
	<head>
		<meta charset="utf-8" />	
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<link rel="stylesheet" href="css/table.css" />
	</head>
	<body>
		<p class="d1"> /*cellspacing="0"边框宽度*/			<table class="t1" border="1"  bordercolor="#e2e2e2" cellspacing="0" cellpadding="1" width="1000">
				<tr height="80">
					<td colspan="4"><img  class="h1 lazy"  src="/static/imghwm/default1.png"  data-src="img/2.png"     alt="How to implement irregular tables in css" >
					<img  class="h2 lazy"  src="/static/imghwm/default1.png"  data-src="img/b.jpg"   / alt="How to implement irregular tables in css" ></td>
				
				</tr>
				<tr height="40">
					<td width="15%" align="center">订单编号</td>
					<td width="35%"><p class="p1">S19000086</p></td>
					<td width="15%" align="center">下单时间</td>
					<td width="35%"><p class="p1">2019-1-12</p></td>
				</tr>
				<tr height="40">
					<td width="15%" align="center">客户名称</td>
					<td width="35%" ><p class="p1">罗茜</p></td>
					<td width="15%" align="center">供应商</td>
					<td width="35%" ><p class="p1">罗茜</p></td>
				</tr>
				<tr height="40">
					<td width="15%" align="center">发票类型</td>
					<td width="35%"><p class="p1">无</p></td>
					<td width="15%" align="center">支付方式</td>
					<td width="35%"><p class="p1">在线支付</p></td>
				</tr>
				<tr height="40">
					<td width="15%" align="center">下单人</td>
					<td width="35%"><p class="p1">罗茜</p></td>
					<td width="15%" align="center">收货人</td>
					<td width="35%"><p class="p1">鲁迅</p></td>
				</tr>
				<tr height="40">
					<td width="15%" align="center">收货地址</td>
					<td colspan="3"><p class="p1">哪位uID反悔任金佛苹果控</p></td>
				</tr>
		<p>
		</p>
		<table border="1" bordercolor="#e2e2e2" cellspacing="0" cellpadding="1" width="1000">
		<tr height="40" bgcolor="#e2e2e2"><th width="75">序号</th>
			<th width="155">零件号</th>
			<th width="140">商品名称</th>
			<th width="95">品牌</th>
			<th width="155">原厂零件号</th>
			<th width="155">原价</th>
			<th width="120">成交价</th>
			<th width="85">数量</th>
			<th width="95">小计</th>
		</tr>
		<tr height="150"><td>1</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr height="100">
			<td>2</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		
		</tr>
	</table>
	</p>
	<p class="d3">
		<table class="t3" border="1"  bordercolor="#e2e2e2" cellspacing="0" cellpadding="1" width="1000" >
			<tr class="tr3" height="40px">
				<td class="td1" width="50%"><p class="p31">人民币：</p></td>
				<td class="td1 a1" width="35%">共计【】件商品：</td>
				<td class="td1 a1" width="15%">83894.00  </td>
				
			</tr>
			<tr class="tr3" height="40px">
				<td class="td1" rowspan="2" width="50%"><p class="p31">原价总额：</p></td>
				<td class="td1 a1" width="35%">运费：</td>
				<td class="td1 a1" width="15%">25.00  </td>
				
			</tr>
			<tr class="tr3" height="40px">
				<td class="td1 a1" width="35%">总额：</td>
				<td class="td1 a1" width="15%">u39248  </td>
			</tr>
		</table>
	</p>
	</body></html>

[Recommended learning:

css video tutorial]

CSS text:

.p1{
	text-align: left;
	text-indent: 2em;//左边空两格}.h1{
	float: left;
	width: 120px;
	height: 80px;
	/*display: block;*/}.h2{
	float: right;//右对齐	width: 120px;
	height: 80px;
	/*display: block;*/}.t3{
	border-top: #F0F8FF;//设置上边框为白色	 /*border-collapse:collapse;*/}.td1{
	/*text-align:justify;
	text-align-last:justify;*/
     line-height:0;
     height:40px;
	border:none;/*这个是单元格，不给他要边框*/
	text-align: left;
	text-indent: 2em;//左边空两格}.a1{
	text-align: right;}

The final style :

How to implement irregular tables in css

The above is the detailed content of How to implement irregular tables in css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Two Images and an API: Everything We Need for Recoloring ProductsApr 15, 2025 am 11:27 AM

I recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show

Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest ConnectionsApr 15, 2025 am 11:19 AM

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds

Options for Hosting Your Own Non-JavaScript-Based AnalyticsApr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

It's All In the Head: Managing the Document Head of a React Powered Site With React HelmetApr 15, 2025 am 11:01 AM

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

What is super() in JavaScript?Apr 15, 2025 am 10:59 AM

What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its

Comparing the Different Types of Native JavaScript PopupsApr 15, 2025 am 10:48 AM

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

Why Are Accessible Websites so Hard to Build?Apr 15, 2025 am 10:45 AM

I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard