Multi-Column Layout For Text Flow Using HTML. - Tutorialspoint

Trang chủ » Html Flow Text Into Two Columns » Multi-Column Layout For Text Flow Using HTML. - Tutorialspoint

Có thể bạn quan tâm

Multi-Column Layout for Text Flow using HTML HTMLWeb DevelopmentFront End Technology

In HTML <multicol> tag is used to create multi-column layouts. It has opening and closing tags, <multicol> </multicol>. Following is the syntax of multicol tag.

<multicol> …….. </multicol>

Attributes of <multicol> tag

Following are the attributes used in <multicol> tag −

cols

The value used for col attribute is number and it specifies how many columns need to be used. Following is the syntax of cols attribute in mutlicol tag.

<multicol cols=3>

gutter

The value used for gutter attribute is px, it specifies the distance between each column in pixels. Following is the Syntax of gutter attribute in <multicol> tag

<multicol cols=3 gutter=10>

width

The value used for width attribute is px, it specifies the width of the column. Following is the syntax of width attribute in <multicol> tag.

<multicol cols=3 width=”40%”>

Example

In the following example we are trying to create a Multi-Column Layout for Text Flow using HTML −

<!DOCTYPE html> <html> <body> <h2>HTML Tutorial</h2> <multicol cols=3> <p>HTML stands as Hyper Text Markup Language.</p> </multicol> </body> </html>

Note − The <multicol> tag is deprecated and is no longer recommended. To create multicol we use DIV tags in HTML, which can be shown below:

<!DOCTYPE html> <html> <head> <style> .sample { column-count: 4; column-gap: 10px; column-rule: 5px solid blue; } </style> </head> <body> <h1> HTML Tutorial</h1> <div class="sample"> HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. </div> </body> </html>

CSS Multi-Column Layout

There are so many CSS properties for multicolumn arrangement in web pages, if we consider newspaper, the arrangement of text is in the form of multicolumn layout only. The different column properties are shown below −

  • column-count

  • column-gap

  • column-rule-style

  • column-rule-width

  • column-rule-color

  • column-rule

  • column-span

  • column-width

Example

Following example, to create a multicolumn layout of text using CSS properties −

<!DOCTYPE html> <html> <head> <title>Muli-column property</title> <style> .content { -webkit-column-span: 4; column-span: 4; -moz-column-count: 4; column-count: 4; padding-top: 35px; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; width: 100%; text-align: justify; -webkit-column-rule-color: blue; -moz-column-rule-color: blue; column-rule-color: blue; } .TP { text-align: center; font-size: 40px; font-weight: bold; color: red; } .tutorial { text-align: center; } </style> </head> <body> <div class="TP">TutorialsPoint</div> <div class="tutorial">A Leading Edutech Company</div> <div class="content"> Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. Tutorials Point India Private Limited, 4th Floor Incor9 Building, Kavuri Hills, Madhapur, Hyderabad, Telangana - 500081, INDIA </div> </body> </html>

Bhanu Priya Bhanu Priya Updated on: 10-Oct-2023

2K+ Views

Từ khóa » Html Flow Text Into Two Columns