从零开始的html教程(5):图像插入与表格介绍

一、如何插入图像?

<img>元素可以向网页插入图片,<img src="XXX" />XXX就是图片的路径,可以是本地路径或者网址,例如:<img src="http://www.htmq.com/images/logo.gif" />就是链接的网页地址。<img>标签没有结束标签,跟<br>标签一样加个斜线"/",完整的形式应该是<img src="" />。<img>一定要有src属性的,不要丢。

我们来试着插入一张图片吧。dreamweaver中输入<img src="后就会弹窗引导打开需要嵌入的图片,非常方便,不用手动输入图片的地址了。

二、修改图像显示的大小

width属性height属性可以规定图像的大小,其中width指定图像显示的宽度,height指定图像显示的高度

我们将img标签添加上width属性和height属性:<img src="_olfwsqpsg4gdmeb9qah-a.jpg" width="600" height="200"/>

完成后的显示效果:

三、html中的表格

html中<table>定义表格,简单的 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元

table标签也可以加上width属性和height属性,在网页中添加了一个table表格:

<table border="1" width="300" height="111">
<tr>
  <th>th1</th>
  <th>th2</th>
</tr>
<tr>
  <td>td1</td>
  <td>td2</td>
</tr>
</table>

添加表格后的效果图:

table中的border属性决定了表格边框线的厚度,0就是没有。

border值改成0之后就是这样的:

四、我们来制作个复杂点带图片的表格吧

结合前面的知识,做一个带有表格和文字的表格。

table如下,仅仅是在td里嵌入了<img>标签,非常简单:

<table border="0">
<tr>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Chrysanthemum.jpg" width="100" height="100" />
  <p>菊花</p>
  </td>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Penguins.jpg" width="100" height="100" />
  <p>企鹅</p>
  </td>

  <td><img src="../../Public/Pictures/Sample Pictures/Desert.jpg" width="100" height="100" />
  <p>沙漠</p>
  </td>

</.tr>

<tr>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Lighthouse.jpg" width="100" height="100"/>
  <p>灯塔</p>
  </td>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Jellyfish.jpg" width="100" height="100" />
  <p>水母</p>
  </td>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Koala.jpg" width="100" height="100" />
  <p>考拉</p>
  </td>

</tr>
</table>

同学们自己动手试试哦,熟能生巧。这篇教程介绍了<img>标签用法和<table>标签的用法,同学们复习一下然后继续学习吧!

时间: 2024-10-12 23:36:56

从零开始的html教程(5):图像插入与表格介绍的相关文章

Painter基础教程之图像水管分享

给各位Painter软件的使用者们来详细的解析分享一下基础教程之图像水管. 教程分享: 1.选用Image Hose(图像水管)的Linear-Size-P变体,在工具条底部的nozzles(水管图像)面板中选择Candy的水管图像.然后在画面上喷涂,马上可以出现一大堆可爱的糖果.painter 8之前的版本有专门的nozzles面板.       2.painter 8自带的Script中有一个叫old wall的Script就是全部用图像水管绘制的,单击播放按钮,无需新建文件,马上就可以看见

从零开始的html教程(2):了解基本的标签与元素

一.html中的标签 上一课利用dreamweaver自动生成的页面的代码为: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> </body> </html> "<html>""</body&

Word2007文档插入Excel表格的方法

1.我们来做一个实验吧我们打开word2007之后在界面中点击"插入"-"页脚",如图; 文档插入Excel表格的方法-word2007文档表格斜线"> 2.点击页脚以后,我们会看到系统内置有多种页脚模板,我们选择最上面的"空白页脚",确认以后就会在文档的最下面看到了插入选项,见下图; 3.好了现在我们在工具栏中点击 "插入" 之后在界面中我们点击 "文本"-"对象" 效

WPS文字中插入复杂表格数据快速计算

  WPS文字是我们常用的办公软件之一,因其简单.实用,所以深受广大用户的喜爱.当我们编辑文档过程中,有时需要在文档中插入表格,对某些数据进行比对或辅助说明,此时就需要对的表格中某些数据结果进行统计了. 对于表格内数据的计算,大家平时都习惯于用Excel来操作,从而忽略了WPS文字中的表格计算功能,其实WPS文字中的表格计算功能同样强大,不但能进行快速操作,还能进行复杂的公式运算. 一.表格数据快速计算 当我们在WPS中插入表格后,有时需要对表格中的数据进行统计.汇总, 以便对文档内容作补充说明

在WPS中插入Excel表格的方法

在<中国电脑教育报>2004年第45期G5版的一篇短文<让金山文字也识http://www.aliyun.com/zixun/aggregation/16544.html">Excel中的表格>引起了笔者的关注,WPS(即"金山文字")是 一款比较成熟的办公软件,金山公司自己也开发了电子表格软件ET,难道真的连Excel表格都玩不转?通过一番实验,笔者找到三种间接 插入Excel表格的方法. 一.另存为Temp.doc格式 先把需要复制的Exce

PowerPoint中轻松插入Excel表格

制作演示文稿少不了要用到表格,而表格我们习惯用Excel制作,将制作好的Excel表格插入到幻灯片中就可以了: 定位到相应的幻灯片中,执行"插入→对象"命令,打开"插入对象"对话框(如图),选中"由文件创建"选项,通过其中的"浏览"按钮,选中需要插入的Excel表格文件,确定返回,将表格插入其中,调整一下大小即可. 注意: ①在Excel中将表格的网格线隐藏起来,使插入的表格观感效果更好. ②如果选中"插入对象&qu

PPT2013幻灯片中插入Excel表格的方法

  在本文中,Office办公助手以PPT2013中操作为例,图文详解PPT2013幻灯片中插入Excel表格的方法. 插入Excel表格 1.打开PPT演示文稿,单击"插入"选项卡,在"文本"组中点击"对象"按钮,如图. 2.弹出"插入对象"对话框,选择"由文件创建",然后点击"浏览"插入Excel表格,最后单击"确定",如下图. 3.确定后,Excel表格就完整的

PowerPoint 2007中轻松插入Word表格

我们知道在PowerPoint中可以创建表格,但如果手头有Word表格,当然不必再浪费时间和精力重新创建.使用插入对象功能可以轻松将Word表格插入到PowerPoint演示文稿中,这种方法显然比从头创建表格更能提高工作效率. 下面以PowerPoint 2007为例,介绍插入Word表格具体操作步骤. 1.在演示文稿编辑模式中,单击功能区的"插入"选项卡. 2.单击"文本"组中的"对象"按钮. 3.在"插入"对象对话框中,单

PPT 2007 中插入Word表格

我们知道在PowerPoint中可以创建表格,但如果手头有Word表格,当然不必再浪费时间和精力重新创建.使用插入对象功能可以轻松将Word表格插入到PowerPoint演示文稿中,这种方法显然比从头创建表格更能提高工作效率. 下面以PowerPoint 2007为例,介绍插入Word表格具体操作步骤. 1.在演示文稿编辑模式中,单击功能区的"插入"选项卡. 2.单击"文本"组中的"对象"按钮. 3.在"插入"对象对话框中,单