Главная » Языки программирования

Example of HTML frame attribute with table

На чтение 10 мин
Содержание
  1. controls the outer borders
  2. Example
  3. HTML frame attribute
  4. Tables in HTML
  5. A Simple Table
  6. Row & Column Spanning
  7. Cell Spacing & Padding
  8. Table Borders
  9. Table Colours
  10. Alignment Of Tables
  11. Alignment Of Table Contents
  12. Table Captions
  13. Table Tricks
  14. HTML frame Attribute
  15. Browser Support
  16. Syntax
  17. Attribute Values
  18. COLOR PICKER
  19. HOW TO
  20. SHARE
  21. CERTIFICATES
  22. Report Error
  23. Thank You For Helping Us!
  24. Top Tutorials
  25. Top References
  26. Top Examples
  27. Web Certificates

controls the outer borders

The frame attribute of the TABLE element specifies which sides of the outer border are displayed.

Attribute Value Explanation
frame=» « void removes all outer borders
lhs displays the left-hand side only
rhs displays the right-hand side only
vsides displays the left and right sides only
above displays the top side only
below displays the bottom side only
hsides displays the top and bottom sides only
box displays all sides
border displays all sides

Example

 border soValue">5" frame soValue">void"> Row1 - Col1 Row1 - Col2 Row1 - Col3  Row2 - Col1 Row2 - Col2 Row2 - Col3

Output

Row1 — Col1 Row1 — Col2 Row1 — Col3
Row2 — Col1 Row2 — Col2 Row2 — Col3

lhs (Displays the left-hand side only)

 border soValue">5" frame soValue">lhs"> Row1 - Col1 Row1 - Col2 Row1 - Col3  Row2 - Col1 Row2 - Col2 Row2 - Col3

Output

Row1 — Col1 Row1 — Col2 Row1 — Col3
Row2 — Col1 Row2 — Col2 Row2 — Col3

rhs (Displays the right-hand side only)

 border soValue">5" frame soValue">rhs"> Row1 - Col1 Row1 - Col2 Row1 - Col3  Row2 - Col1 Row2 - Col2 Row2 - Col3

Output

Row1 — Col1 Row1 — Col2 Row1 — Col3
Row2 — Col1 Row2 — Col2 Row2 — Col3

vsides (Displays the left and right sides only)

 border soValue">5" frame soValue">vsides"> Row1 - Col1 Row1 - Col2 Row1 - Col3  Row2 - Col1 Row2 - Col2 Row2 - Col3

Output

Row1 — Col1 Row1 — Col2 Row1 — Col3
Row2 — Col1 Row2 — Col2 Row2 — Col3

above (Displays the top side only)

 border soValue">5" frame soValue">above"> Row1 - Col1 Row1 - Col2 Row1 - Col3  Row2 - Col1 Row2 - Col2 Row2 - Col3

Output

Row1 — Col1 Row1 — Col2 Row1 — Col3
Row2 — Col1 Row2 — Col2 Row2 — Col3

below (Displays the bottom side only)

 border soValue">5" frame soValue">below"> Row1 - Col1 Row1 - Col2 Row1 - Col3  Row2 - Col1 Row2 - Col2 Row2 - Col3

Output

Row1 — Col1 Row1 — Col2 Row1 — Col3
Row2 — Col1 Row2 — Col2 Row2 — Col3

hsides (Displays the top and bottom sides only)

 border soValue">5" frame soValue">hsides"> Row1 - Col1 Row1 - Col2 Row1 - Col3  Row2 - Col1 Row2 - Col2 Row2 - Col3

Output

Row1 — Col1 Row1 — Col2 Row1 — Col3
Row2 — Col1 Row2 — Col2 Row2 — Col3
Читайте также:  Examples

box and border (Displays all sides)

 border soValue">5" frame soValue">box" style="margin-bottom: 10px;"> Row1 - Col1 Row1 - Col2 Row1 - Col3  Row2 - Col1 Row2 - Col2 Row2 - Col3   border soValue">5" frame soValue">border"> Row1 - Col1 Row1 - Col2 Row1 - Col3  Row2 - Col1 Row2 - Col2 Row2 - Col3

Output

Row1 — Col1 Row1 — Col2 Row1 — Col3
Row2 — Col1 Row2 — Col2 Row2 — Col3
Row1 — Col1 Row1 — Col2 Row1 — Col3
Row2 — Col1 Row2 — Col2 Row2 — Col3

Источник

HTML frame attribute

The purpose of the HTML frame attribute is to specify which sides of a table frame should be displayed.

It’s better to use CSS border-style properties instead of using frame attribute for table element.

Supported elements

HTML frame attribute supports table element.

Type of value

Value Description
void Only outside borders are not displayed.
above Only top outside is displayed.
below Only bottom outside border, is displayed.
hsides Only top and bottom outside borders are displayed.
vsides Only left and right outside borders are displayed.
lhs Only left outside border is displayed.
rhs Only right outside border is displayed.
box For all four sides, only outside borders are displayed.
border For all four sides, only outside borders are displayed.

Default value

There is no default value of HTML frame attribute.

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of HTML frame attribute with table 

        
 
Employee code Salary 
 
EM001 $1500 
 
EM002 $1700

html frame attribute with table

View this example in a separate browser window

Test your Programming skills with w3resource’s quiz.

Follow us on Facebook and Twitter for latest update.

  • Weekly Trends
  • Java Basic Programming Exercises
  • SQL Subqueries
  • Adventureworks Database Exercises
  • C# Sharp Basic Exercises
  • SQL COUNT() with distinct
  • JavaScript String Exercises
  • JavaScript HTML Form Validation
  • Java Collection Exercises
  • SQL COUNT() function
  • SQL Inner Join
  • JavaScript functions Exercises
  • Python Tutorial
  • Python Array Exercises
  • SQL Cross Join
  • C# Sharp Array Exercises

We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook

Источник

Tables in HTML

Tables are the most essential item in web page layout. They allow you to arrage your text and pictures around the page as you want. You can create very interesting layouts if used well. You can embed tables inside tables if you want to create more complicated layouts

A Simple Table

 
 
Top Left Top Middle Top Right 
 
Bottom Left Bottom Middle Bottom Right

Row & Column Spanning

Читайте также:  Byte value range java

You can use these command to create more complicated tables.

 
 
Left Top 
 
Bottom Middle Bottom Right

The cells which would have contained the words «Bottom Left» and «Top Right» are of cource left out as these spaces are being taken up by the «Left» & «Top» cells.

Cell Spacing & Padding

These settings control how wide the spaces between the cells are and how much padding is put between each cell boundary and its contents.

 
 
Top Left Top Right 
 
Bottom Left Bottom Right

From now on I will only reproduce the bits of code
that control the settings that we are looking at. The rest
of the table code is similar to that in the previous example.

Table Borders

The FRAME command can be used to give more precise control over which parts of the table borders are shown. These work in HTML 3.0 supporting browsers. Therefore these only work in IE4 at the moment.

The RULES attribute has a similar effect but allows you to specify ruled lines between the columns and rows

Table Colours

There are a selection of commands which allow you control over how a table is coloured. For information on the Hexidecimal colour values see my Hexidecimal Colour Chart.

 This sets the back ground colour for the whole table.
 
 
Top Left Top Right 
 
Bottom Left Bottom Right

Not supported by Netsape 3

Sets the light border color to yellow and the dark background color to red. Not supported by Netsape 3

 
 
Top Left Top Right 
 
Bottom Left Bottom Right

You can also give the table a background picture and specify individual images for each cell if you want.
IE4 & N4 only.

Alignment Of Tables

Alignment Of Table Contents

 
 
This text is aligned to the top left of the cell This text is aligned vertically at the top This text is aligned to the top right of the cell at the top right hand side of the table 
 
This text is aligned horizontally to the left This text is aligned horizontally and vertically in the middle of the cell This text is aligned horizontally to the right 
 
This text is aligned to the bottom left of the cell at the bottom left hand side of the table This text is alligned vertically at the bottom This text is aligned to the bottom right of the cell

Table Captions

 
 This is the table's top caption 
Top Left Top Right 
 
Bottom Left Bottom Right 
 
 
 This is the table's bottom caption 
Top Left Top Right 
 
Bottom Left Bottom Right

Table Tricks

Читайте также:  Text box border style in html

You may have noticed that some of my tables have circular corners instead of the usual square ones like the table below.

   Table With Circular Corners

Table With
Circular Corners

This is done by putting a gif in the corners of the table. The Quarter-Circle part of it is transparent to let the table colour show through. The other bit is white to hide the corner. All that needs to be done is adjust some of the tables parameters so that the GIFs push up right against the edges of the table.

By altering the settings and giving the GIFs a border in the example below you can see the GIFs white corners. By moving the images into the corners of the table we can produce a table that seems to have rounded corners such as the table above.

You can of cource use this technique to produce all sorts of interestingly shaped tables.

Источник

HTML frame Attribute

The frame attribute specifies which parts of the outside table borders that should be visible.

Tip: It may be better to NOT specify a frame, and use CSS to apply borders instead.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Attribute
frame Yes 9.0 Yes Yes Yes

Syntax

Attribute Values

Value Description
void The outside borders are not shown
above The top outside border is shown
below The bottom outside border is shown
hsides The top and bottom outside borders are shown
vsides The left and right outside borders are shown
lhs The left outside border is shown
rhs The right outside border is shown
box The outside borders are shown on all four sides
border The outside borders are shown on all four sides

❮ HTML

tag

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Источник

Оцените статью
© 2023 Программирование