创建一张表格

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

在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. STM32的RTC万年历显示问题

    博客整理后写出来的,有点乱,大家见谅! 想让串口输出万年历效果.每次秒刷新一次 结果是串口软件一直输出,看起来很难受 先讲一讲C代码的\r和\n的区别 \r 就是return 回到 本行 行首 这就会 ...

  2. 转：CFile.Open()的使用说明

    在程中碰到这个一段代码: 讲的是CFILE类的文件操作,故参考MSDN系统学习一下(翻译了一下英文): CFile file;CFileException fe; //打开文件if(!file.Ope ...

  3. Mssql显错和不显错模式下的注入

    Title:Mssql显错和不显错模式下的注入 -- 2010-10-27 19:51 近期用手工注入用习惯了,便列出最近用的Mssql语句,以后方便拿来用! -------------------- ...

  4. PHP 访问类中的静态属性

    静态属性和普通属性不一样,静态属性只属于类本身而不属于类的任何实例,所以他们的访问方式也不一样.你可以把静态属性认为是存储在类当中的全局变量,而且你可以在任何地方通过类来访问它们. 在类本身中访问静态 ...

  5. php/java bridge

    http://blog.163.com/wangyifeng_0821/blog/static/3077437220103645838478/ http://hi.baidu.com/luanxian ...

  6. Cisco C2900XL

    http://docstore.mik.ua/univercd/cc/td/doc/product/lan/c2900xl/c2900sa4/sa4cr/macintr.htm#xtocid10160 ...

  7. poj 3335 Rotating Scoreboard

    http://poj.org/problem?id=3335 #include <cstdio> #include <cstring> #include <algorit ...

  8. Large sum

    聪明的办法是想:求前10位,那只要前8位加起来,进2位就OK. 本的办法,就是真的加起来,截前面10位.如我. numList = str.split() sum = 0 for i in range ...

  9. Qt编程之右键单击QTreeWidgetItem弹出菜单

    其实有这个需求很好理解,就是我有个project manager,上面的TreeWidgetItem都表示一个工程,我需要右键创建新的工程,或者删除.这个在很多普通软件中也见得多.在弹出的菜单中加入相 ...

  10. 【HDOJ】3316 Mine sweeping

    简单BFS. #include <iostream> #include <cstdio> #include <cstring> #include <cstdl ...