Home >Web Front-end >HTML Tutorial >How to achieve mixed arrangement of images and text in html

How to achieve mixed arrangement of images and text in html

php中世界最好的语言
php中世界最好的语言Original
2018-02-05 09:35:1612044browse

This time I will show you how to achieve mixed arrangement of graphics and text in html. What are the precautions for implementing mixed arrangement of graphics and text in html. The following is a practical case, let’s take a look.

Text around image

If we use normal, for example:

<TABLE cellpadding="15" width="200">
<TR>
<TD bgcolor="#EEEEFF"><IMG src="test.gif" hight=60>这里是普通的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD>
</TR>
</TABLE>

In a statement like this, the picture is higher than the height of the text, There will be a blank space above the text. The effect of the page is very poor. How to solve it? Please look at this code:

<TABLE cellpadding="15" width="200">
<TR>
<TD bgcolor="#EEEEFF"><IMG src="test.gif" hspace="1" align="LEFT" hight=60>这里是绕排的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD>
</TR>
</TABLE>

Add this attribute to the img element to solve the problem: align="center", the problem will be solved. Keep it simple! As for hspace, it defines the width of the picture and surrounding elements. It doesn't matter whether it is bypassed or not.

How was this done? Let’s take a look at this code first:

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font> </table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr>
</table>

How to achieve such an effect?

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font>
</table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr>
</table>

This code explains it. If you are smart, you will know it at a glance. Just put the words you want to enlarge in this table.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

What are the methods to prohibit page caching

How to add flash video format (flv, swf) files in html

The above is the detailed content of How to achieve mixed arrangement of images and text in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn