td

用css样式,为表格加入边框

拜拜、爱过 提交于 2019-11-28 18:06:55
Table 表格在没有添加 css 样式之前,是没有边框的。这样不便于我们后期 合并单元格 知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框。 在右侧代码编辑器中添加如下代码: <style type="text/css"> table tr td,th{border:1px solid #000;} </style> 上述代码是用 css 样式代码( 后面章节会详细讲解 ),为 th , td 单元格添加粗细为一个像素的黑色边框。 结果窗口显示出结果样式: 实例: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>为表格添加边框</title> <style type="text/css"> table tr td,th{border:1px solid #000;} </style> </head> <body> <table summary=""> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td>

IGeek案例2-添加商品

元气小坏坏 提交于 2019-11-28 16:16:49
案例2-添加商品 1 页面一加载就能动态的获取所有的分类 1 创建category表 CREATE TABLE category ( cid VARCHAR(50) NOT NULL, cname VARCHAR(20) DEFAULT NULL, PRIMARY KEY (cid) ) 2 category表中添加数据 INSERT INTO category VALUES ('1','手机数码'),('2','运动户外'), ('3','电脑办公'),('4','家具家居'), ('5','鞋靴箱包'),('6','图书音像'), ('7','母婴孕婴'),('8','汽车用品'); 3admin/product/list.jsp添加处理servlet <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <HTML> <HEAD> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="$

表格

梦想与她 提交于 2019-11-28 15:51:23
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ width: 300px; margin: 5px auto; /*table 和td之间默认会有一个距离,通过border-spacing设置为零*/ border-spacing: 0px; /*用于设置边框合并成一条线,则border-spacing自动失效*/ border-collapse: collapse; border: 1px solid black; } /*隔行变色*/ tr:nth-child(even){ background-color: dodgerblue; } /*选中变色*/ tr:hover{ background-color: red; } td , th{ border: 1px solid black; text-align: center; } </style> </head> <body> <!-- 长表格:方便翻页,表头和表尾可以不变,表头永远在顶部,表尾永远在底部,与写的顺序无关--> <table> <thead> <th></th> </thead> <tbody> <tr></tr> </tbody> <tfoot> <tr><

表格

别等时光非礼了梦想. 提交于 2019-11-28 14:43:56
1、基本格式: <table>//定义一个完整的表格 <tr>//一行 <td></td>//一个单元格 <td></td> <td></td> </tr> </table> 用表格实现成绩登记表: <html> <head> <meta charset="utf-8"> <title>成绩登记表格</title> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspacing="3"> <!-- 可以 定义表格的大小,背景,边框,单元格间距等 --> <caption>成绩登记表</caption> <tr> <th bgcolor="blanchedalmond "align="middle" >序号</th> <!-- <th></th>标记设置--> <th bgcolor="blanchedalmond "align="middle ">学号</th> <th bgcolor="blanchedalmond "align="middle ">姓名</th> <th bgcolor="blanchedalmond "align="middle ">平时成绩</th> <th bgcolor="blanchedalmond "align="middle ">期末成绩

spring boot 整合freemaker

怎甘沉沦 提交于 2019-11-28 14:40:45
前端最好使用vue.js 这里是freemaker 整合spring boot 1.编写pom文件: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> 2.编写cotroller: @RequestMapping("/b") public String b( Map<String,Object> map) { Student s1=new Student("a","f",1,"aa"); Student s2

Each child in an array or iterator should have a unique \"key\" prop.

南楼画角 提交于 2019-11-28 13:59:57
Each child in an array or iterator should have a unique "key" prop. 解决办法使用React.Children.toArray import React from 'react' import Slider from 'react-slick' export default class Table extends React.Component{ constructor(props) { super(props) this.state = { th: [ "名称", "城市", "邮编" ] } } render() { const { table, children } = this.props return( <table className="table table-striped"> <caption>条纹表格布局</caption> <thead> <tr> { React.Children.map( this.state.th , th => <th>{ th }</th> ) } </tr> </thead> <tbody> { React.Children.toArray( table.map(o=>( <tr> <td>{o.name}</td> <td>{o.city}</td> <td>{o

8-html表格

不想你离开。 提交于 2019-11-28 13:24:57
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>html表格</title> <link rel="stylesheet" href=""> </head> <body> <!-- table标签:声明一个表格 tr标签:定义表格中的一行 td与th标签:定义一行中的一个单元格,td代表普通单元格,th代表表头单元格 --> <h3>产品列表</h3> <!-- border:边框,width:宽度,height:高度--> <table border="1" width="300" height='150'> <tr> <th>序号</th> <th>产品名称</th> <th>产品价格</th> <th>产品数量</th> </tr> <tr> <!-- align: center:设置水平居中 left:向左对齐 right:向右对齐 middle:设置垂直居中(默认就是这样) --> <td align="center">1</td> <td>苹果</td> <td>¥5.00</td> <td>1000</td> </tr> <tr> <td align="center">2</td> <td

9-传统表格布局

被刻印的时光 ゝ 提交于 2019-11-28 13:24:45
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>传统表格布局</title> </head> <body> <!-- html表格 table常用标签 1、table标签:声明一个表格 2、tr标签:定义表格中的一行 3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格 table常用属性: 1、border 定义表格的边框 2、cellpadding 定义单元格内内容与边框的距离 3、cellspacing 定义单元格与单元格之间的距离 4、align 设置单元格中内容的水平对齐方式,设置值有:left | center | right 5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom 6、colspan 设置单元格水平合并 7、rowspan 设置单元格垂直合并 传统布局: 传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点: 1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0 2、单元格里面嵌套表格 3、单元格中的元素和嵌套的表格用align和valign设置对齐方式 4、通过属性或者css样式设置单元格中元素的样式 传统布局目前应用: 1

10-传统布局应用

北战南征 提交于 2019-11-28 13:24:33
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简历</title> </head> <body> <table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td width="260"> <table width="260"> <tr height="100"> <td></td> <td></td> </tr> <tr> <td width="230" align="right"><img src="../image/touxiang.jpg" alt="人物图片"></td> <td width="30"></td> </tr> <tr> <td align="right">张达山</td> <td></td> </tr> <tr> <td align="right">9090950</td> <td></td> </tr> <tr> <td align="right">66666@qq.com</td> <td></td> </tr> </table> </td> <td width="30"></td> <td width="480">