创建一张表格

很多时候我们需要在网页上展示一些数据，使用表格可以很好的来展示数据。

在HTML中<table>标签定义 表格。

<table>

</table>

添加一行

<table>标签相当于定义了一个表格容器。我们现在要创建表格的行，等会我们再创建列。

标签<tr>表示<table>里的行，在<table>里嵌套了几个完整的（拥有开始标签和闭合标签的）<tr>标签就表示这个<table>有几行：

<table>

    <tr></tr>

    <tr></tr>

    ...

</table>

　　

添加一列

在给表格创建了行之后，我们要给表格的行里面添加单元格，标签<td>表示HTML 表格中的标准单元格。

现在我们可以把要显示的内容放到<td>标签里，我们可以看到页面会把标签<td>里的内容呈现在页面上。

为了方便观察表格单元格的情况，我们给table加了border属性。

<table border="1"></table>

[border]属性我们会在后面具体讲解。

加上<td>结构是这样：

<table>

    <tr>

        <td></td>

        <td></td>

        ...

    </tr>

    <tr></tr>

    ...

</table>

　　

添加多行多列

我们已经知道表格是怎样生成的了，我们来尝试下给页面添加一个多行多列的表格吧。

代码内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>创建一个多行多列的表格</title>

</head>

<body>

<h1>创建一个多行多列的表格</h1>

  <table border="1" wdith= '200' height = '200'>

  <tr><td></td><td></td><td></td></tr>

    <tr><td></td><td></td><td></td></tr>

      <tr><td></td><td></td><td></td></tr>HTML&CSS基础学习笔

  </table>

</body>

</html>

结果如何呢？可以前往http://www.mayacoder.com/lesson/lesson?lesson_id=31&knowledge_id=8 查看答案哦~~~~

HTML&CSS基础学习笔记—创建列表的更多相关文章

  1. HTML&CSS基础学习笔记1.16-单元格间距和表格主体

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

  2. HTML&CSS基础学习笔记1.13—无序列表

    无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无 ...

  3. HTML&CSS基础学习笔记1.14—有序列表及列表嵌套

    我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去 ...

  4. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  5. HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表

    文本域 <textarea>标签定义多行的文本输入控件. 平时在网页上的一些需要输入比较多的内容的输入框,比如回复帖子,回答问题等,都可以用<textarea>标签. < ...

  6. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

  7. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  8. HTML&CSS基础学习笔记1.24-input标签的单选与多选

    单选和多选 单选框和多选框是用<input>标签来实现的. <input>标签的type属性值为"checkbox"时,表示多选框,为"radio ...

  9. HTML&CSS基础学习笔记1.5-添加常用标签

    代码如下: <!DOCTYPE html><html lang="en"><head>    <meta charset="UT ...

随机推荐

  1. QQ音乐的请求

    CEF 3.2357.1291.g47e6d4bChromium 43.0.2357.134OS WindowsWebKit 537.36JavaScript 4.3.61.38Flash User ...

  2. Java 多线程之龟兔赛跑（文件夹——读取文件——时间）

    版权声明:本文为博主原创文章,未经博主允许不得转载. 描述: 乌龟和兔子(各自是一个Java线程)在我们的电脑上赛跑,我们为它们指定一个跑道(本地文件系统上的一个目录,该目录包含子目录).跑的规则是读 ...

  3. linux中fork()函数

    man fork: FORK() Linux Programmer's Manual FORK(2) NAME fork - create a child process SYNOPSIS #incl ...

  4. 【转】listView中，checkBox的显示和隐藏

    原文网址:http://www.cnblogs.com/vicma/p/3460500.html 在listView中,每个item都有一个ChexBox,当显示的时候在listView外面设置一个按 ...

  5. hdu 4585 Shaolin(STL map)

    Problem Description Shaolin temple is very famous for its Kongfu monks.A lot of young men go to Shao ...

  6. oracle中 connect by prior 递归算法

    Oracle中start with...connect by prior子句用法 connect by 是结构化查询中用到的,其基本语法是: select ... from tablename sta ...

  7. lession2:使用HTTP Cookie 管理器来传递cookies值

    在实际进行压力测试的时候,经常会出现使用cookie传递值的情况,此时就需要使用[HTTP Cookie 管理器]来传递cookie值. 1.参照lession1中,创建线程组.sampler及聚合报 ...

  8. json对象转字符串与json字符串转对象

    1.概述: 我们在编程时进场会遇到json对象转字符串,或者字符串转对象的情况. 2.解决办法: json.parse()方法是将json字符串转成json对象. json.stringfy()方法是 ...

  9. JNI(5)The Invocation API

    调用API允许软件提供商加载Java VM 到任意的本地应用中.供应商可以提供支持Java的应用程序而无需链接Java VM的代码. 概述 下面代码展示了通过调用API如何使用函数.这个例子中C++代 ...

  10. html中编写js的方式

    第一种:引用外部的js文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ...