How to set center alignment in css table
In CSS, you can align the middle of the table by setting the "margin:auto;" style to the table element. This style assigns the same auto value to the left and right margins of an element. Then the left and right margins of this element will equally divide the available space occupied, so we will see that the element is horizontally centered.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css table setting center alignment
In css, you can set the margin:auto; style for the table tag to center the table.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格居中</title>
<style>
div{
width: 200px;
padding: 10px;
border: 1px solid peru;
}
table,td,tr {
border: 1px solid red;
margin: auto;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
</table>
</div>
</body>
</html>Rendering:
margin:auto; working principle
It assigns the same auto value to the left and right margins of an element, then the left and right margins of this element will equally divide the available space occupied (1 of the width of the parent element) /2), so we see that the element appears horizontally centered.
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set center alignment in css table. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to achieve gap effect on the card and coupon layout with gradient background?
Apr 05, 2025 am 07:48 AM
Realize the gap effect of card coupon layout. When designing card coupon layout, you often encounter the need to add gaps on card coupons, especially when the background is gradient...
Can Bootstrap directly implement horizontal waterfall flow layout?
Apr 05, 2025 am 07:15 AM
Using the Bootstrap framework to build horizontal waterfall flow layout Many developers hope to use the Bootstrap framework to quickly build web pages and achieve various complex layout effects...
The style remains the same after PC page zooms: What are the possible solutions?
Apr 05, 2025 am 07:51 AM
The challenge of keeping the style of the page zoomed and the same after the page is zoomed in. Many developers will encounter a difficult problem when making PC pages: when the user zooms in or out of the browsing...
iconfont icon displays abnormal intermittently? How to troubleshoot and solve coding problems
Apr 05, 2025 am 07:54 AM
iconfont...
How to use the locally installed 'Jingnan Mai Round Body' on a web page and solve the display problem?
Apr 05, 2025 pm 02:06 PM
How to use locally installed font files on web pages In web development, users may want to use specific fonts installed on their computers to enhance the network...
2K resolution rendering design of corporate websites: How can we perfectly adapt to the customer's display environment?
Apr 05, 2025 am 07:21 AM
Enterprise website rendering design: How to deal with the needs of 2K resolution. When designing a corporate website, customers often encounter special resolution requirements.
How to create blocks of irregular shapes with CSS code only?
Apr 05, 2025 am 07:39 AM
Cleverly using CSS to implement irregular shape blocks This article will explain in detail how to use CSS to create irregular black shape blocks similar to those shown in the figure below: [There should be inserted here...
What exactly is the merge of CSS vertical margins?
Apr 05, 2025 am 09:12 AM
In-depth understanding of CSS vertical margin merging In CSS style design, vertical margin merging is a common problem, which refers to adjacent block-level elements...
