创建一张表格

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

在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. 修改apk显示或隐藏桌面图标

    反编译CM设置,打开AndroidManifest.xml,搜索“DEFAULT”,把他替换为"LAUNCHER",然后回编译,回编译之后签名在用RE放到system\app下该权 ...

  2. 『局域网安全』利用ARP欺骗劫持Cookie

    0x 00 ARP欺骗说明 欺骗原理相关内容就不多叙述了,百度一大堆 实施ARP欺骗在Windows下,Linux下都相关工具 由于在Linux下可以开启ip_forward功能,个人认为Linux下 ...

  3. AD 删除一个区域里的所有布线，不删除元器件，丝印等

    想删除一个区域里的所有布线,不删除元器件,丝印等 按F12后输入以下组合:isvia or(istrack and OnTopLayer) or (istrack and OnBottomLayer) ...

  4. 我为什么放弃了win7系统

    作为一个软件开发者,由于要常年维护一些老系统,所以非常看中win7对一些稍老一点软件的兼容性,可它还是让我失望了: 如果没有特殊手段,sqlserver2000是不能向导式安装成功的: 之前公司的主要 ...

  5. jQuery效果-滑动

    index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  6. Maven相关介绍

    Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(Depen ...

  7. 《UNIX环境高级编程》笔记--信号集

    1.信号集基本操作 我们需要有一个能表示多个信号--信号集(signal set)的数据类型.POSIX.1定义了数据类型sigset_t以包含一个信号 集,并且定义了一下五个处理信号处理信号集函数. ...

  8. ORACLE CASE WHEN 及 SELECT CASE WHEN的使用方法

    CASE 语句 CASE selector   WHEN value1 THEN action1;   WHEN value2 THEN action2;   WHEN value3 THEN act ...

  9. Mina入门实例

    继续上一篇,这篇主要讲通过mina往B端发送消息.并接受消息,mina是一个网络通信框架,封装了javaNIO.简单易用.网上有非常多关于他的介绍,在此不赘述了. 如上篇所介绍,完毕功能,须要五个类: ...

  10. exit和abort都是用来终止程序的函数

    exit会做一些释放工作:释放所有的静态的全局的对象,缓存,关掉所有的I/O通道,然后终止程序.如果有函数通过atexit来注册,还会调用注册的函数.不过,如果atexit函数扔出异常的话,就会直接调 ...