前端学习笔记--table表格的使用

前言

表格,顾名思义就是通过语法画出像excel那样的表格,只不过html中表格除了可
以嵌套文字,还可以嵌图片、链接等等,有一些类似于商品的布局运用了表格
(那种在前端开发中似乎形容成盒子,很形象,不过这个盒子可以装各种各样的
东西)。其实个人理解,表格应该是应用在各种不同元素之间的排版!强迫症的
一大福音啊,不然让攻城狮调这种类似于绝对布局的每个数值的话...细思极恐。

其实表格就是在页面上的一个行向量容器

语法笔记


  • 通过 ...
    标签绘制表格
    1,在这个标签中border可以设置表格边框的粗细,默认是0,相当于只有一条线。
    2,height,width设置表格高度和宽度。
    3,bordercolor设置边框颜色,默认黑色好像。
    4,align设置整个表格在页面中的对齐方式,left、center、right。
    5,bgcolor设置表格的背景颜色
    6,background设置表格的背景图片,常用!

  • 通过 ... 来绘制表格的行属性(行标签)
    表格能设置的各种属性外(语法也一样)align,valign水平位置,垂直位置(top、middle、bottom)

  • 通过 ... table data,其实就是每一行中的各个格子的内容
    同样的,他也能够设置各种背景宽、高,还有一个很重要的东西:colspan设置该格子的水平跨度,可以理解成合并单元格,rolspan设置该格子的垂直跨度,相当于纵向的合并单元格。
    如果行中设置了背景,单元格又设置了,以单元格的为准,就近原则…(Ps:话说英语是不是也有这东西(就近原则)来着?)

  • 通过 ... 标签绘制表格的表头,自动加粗。当然那些通用的属性这个标签也能用。

  • 通过cellpadding,cellspacing来设置单元格的内边距和单元格之间的间距

  • 通过...设置标题同样的也可以设置是放在表头还是底部

  • html中还规定了、、用来统一的设置表格属性,以免更改困难。相当于开个全局变量。
    value1水平对齐方式
    color_value颜色
    value2垂直对齐方式

标签 描述
align 水平对齐方式
valign 垂直对齐方式
bgcolor 设置背景颜色
background 设置背景图像
width 宽度
height 长度
rowspan 水平跨度,水平合并单元格
colspan 垂直合并单元格
#### 以上是利用html画的表格
<table align="center">
	<tr align="center">
		<th>标签th>
		<th>描述th>
	tr>
	<tr align="center">
		<td>aligntd>
		<td>水平对齐方式td>
	tr>
	<tr align="center">
		<td>valigntd>
		<td>垂直对齐方式td>
	tr>
	<tr align="center">
		<td>bgcolortd>
		<td>设置背景颜色td>
	tr>
	<tr align="center">
		<td>backgroundtd>
		<td>设置背景图像td>
	tr>
	<tr align="center">
		<td>widthtd>
		<td>宽度td>
	tr>
	<tr align="center">
		<td>heighttd>
		<td>长度td>
	tr>
	<tr align="center">
		<td>rowspantd>
		<td>水平跨度,水平合并单元格td>
	tr>
	<tr align="center">
		<td>colspantd>
		<td>垂直合并单元格td>
	tr>	
table>

实验代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tabletitle>
head>
<body>
<table height="260" border="" width="600" cellspacing="0" align="center" cellpadding="">
    <caption>水果订单表caption>
    <tr>
        <th >水果th>
        <th>价格th>
        <th>数量th>
    tr>
    <tr background="img/apple.JPG">
        <td>苹果td>
        <td>¥6.50/斤td>
        <td>2td>

    tr>
    <tr>
        <td>香蕉td>
        <td>¥3.50/斤td>
        <td>10td>
    tr>
    <tr>
        <td align="right">合计td>
        <td colspan="2" align="right">¥48td>
    tr>
table>
body>
html>
效果

前端学习笔记--table表格的使用_第1张图片

你可能感兴趣的:(前端学习)