Web Front-end
HTML Tutorial
Usage of display:table, display:table-row and display:table-cell_html/css_WEB-ITnose
Usage of display:table, display:table-row and display:table-cell_html/css_WEB-ITnose
Usage of display:table and display:table-cell:
Suggestion: Handwrite the code as much as possible, which can effectively improve the efficiency and depth of learning.
The table and table-cell attribute values of the display attribute are not very commonly used, mainly because the compatibility of browsers is not good, because a considerable number of users are still using the evil IE6 and IE7, but it is not without their development The opportunity to show off, display:table-cell has been briefly introduced in the usage introduction of display:table-cell, but I feel it is not comprehensive enough, so let’s give a comprehensive introduction with a collection of examples.
Basic concepts of three attribute values:
1.table: Specify the object as a table at the block element level, similar to the html tag
| . As can be seen from the basic conceptual definitions of the above attribute values, they can create a table effect created by non-table related tags. The code example is as follows:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .table{ display:table; } .tr{ display:table-row; width:200px; height:200px; } .td{ display:table-cell; width:100px; height:100px; background-color:green; border:1px solid red; } tr{ width:200px; height:200px; } td{ width:100px; height:100px; background-color:green; border:1px solid red; } </style> </head> <body> <div class="table"> <div class="tr"> <div class="td"></div> <div class="td"></div> </div> </div> <br/> <table cellpadding="0" cellspacing="0"> <tr> <td></td> <td></td> </tr> </table> </body> </html>Copy after login Judging from the performance of the above code, after adding relevant attribute values to the div, it almost fully has the relevant characteristics of the table. Of course, the above demonstration cannot fully explain the relevant characteristics of the table. The above code only explains the three attribute values. role. At this point, some friends may ask this question: In many practical applications, there is no complete definition of hierarchical relationships like tables, but often only display:table-cell. This is because, if an object has display:table -cell, and its parent element and grandparent element do not define display:table-row and display:table-cell, then these two parent elements will be created anonymously, although there will be no change in appearance. The code example is as follows:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .parent{ width:200px; height:200px; background-color:green; display:table-cell; vertical-align:middle; } .children{ width:60px; height:60px; background-color:red; font-size:12px; } </style> </head> <body> <div class="parent"> <div class="children">蚂蚁部落</div> </div> </body> </html>Copy after login In the above code, the parent element has display:table-cell, but it does not have the parent element or grandparent element to define display:table-row and display :table-cell. At this time, two objects with this attribute will be created anonymously. Of course, the appearance cannot be seen. The reason why the child elements in the above code can be vertically centered is because the td element has the valign attribute, and vertical-align:middle will only take effect in objects with the valign attribute, so the above code successfully achieves the vertical centering effect. In the position-height div vertical centering effect that is compatible with various browsers, display:table-cell is used in the middle object, and display:table-cell is also declared in its parent object parent. Otherwise, two objects with this attribute will be created anonymously. Object, the size of the middle object will be adaptive according to the content, so that the vertical centering effect cannot be achieved in standard browsers. The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/504.html
Statement of this Website
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
Hot AI Tools
Undresser.AI UndressAI-powered app for creating realistic nude photos 
AI Clothes RemoverOnline AI tool for removing clothes from photos. 
Undress AI ToolUndress images for free 
Clothoff.ioAI clothes remover 
Video Face SwapSwap faces in any video effortlessly with our completely free AI face swap tool! 
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution
3 weeks ago
By DDD
What's New in Windows 11 KB5054979 & How to Fix Update Issues
2 weeks ago
By DDD
Where to find the Crane Control Keycard in Atomfall
3 weeks ago
By DDD
Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation
1 months ago
By DDD
Roblox: Dead Rails - How To Complete Every Challenge
3 weeks ago
By DDD
Hot Tools
Notepad++7.3.1Easy-to-use and free code editor 
SublimeText3 Chinese versionChinese version, very easy to use 
Zend Studio 13.0.1Powerful PHP integrated development environment 
Dreamweaver CS6Visual web development tools 
SublimeText3 Mac versionGod-level code editing software (SublimeText3)
Hot Topics
CakePHP Tutorial
1387
52
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process. 
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati 
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website. 
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159 
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex 
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM. 
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences. 
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee... 
|
