How place a checkbox into the center of a table cell? Last Updated : 15 Jul, 2025 Comments Improve Suggest changes Like Article Like Report To center a checkbox in a table cell, use CSS to align it horizontally and vertically within the cell. Below are the approaches to place a checkbox in the center of a table cell: Table of Content Using FlexBox propertyUsing Text align center propertyUsing FlexBox PropertyIn this method, we are using the display FlexBox property to center the checkbox in the cell of the table. Note: This method will not make the text after the checkbox be treated as the block element and text entered after the check will be visible Example: The example below shows how place a checkbox into the center of a table cell using Using FlexBox property. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* Stylesheet*/ table { border-collapse: collapse; padding: 20px; } td { border: 1px solid #000; padding: 20px; } .checkbox { width: 200px; background-color: #098043; color: #fff; margin: auto; } input { margin: auto; /*setting margin to auto of the cheeckbox*/ display: flex; /*Flex box property*/ } </style> <body> <!-- Table start--> <table> <!-- row start--> <tr> <!-- column start--> <td class="checkbox">Geeks for Geeks</td> <td class="checkbox">Geeks for Geeks</td> <!-- Column closed--> </tr> <!-- row closed--> <tr> <td class="checkbox"> <input type="checkbox"> </td> <td class="checkbox"> <input type="checkbox"> </td> </tr> </table> </body> </html> Output: Using Text align center PropertyIn this method, we will be using Text align center property of the CSS to center the checkbox in the cell. Note: This method will center everything in the td of the table. Example: The example below shows how place a checkbox into the center of a table cell using Text align center property. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> table, td { border-collapse: collapse; border: 1px solid #000; padding: 10px; } .checkbox { text-align: center; /*Centering the text in a td of the table*/ } </style> <body> <table> <tr> <td> Geeks for Geeks </td> <td> Geeks for Geeks </td> </tr> <tr> <td class="checkbox"> <input type="checkbox"> </td> <td class="checkbox"> <input type="checkbox"> </td> </tr> </table> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Center a Table in Google Docs T tarun007 Follow Improve Article Tags : CSS CSS-Misc HTML-Misc HTML-Questions CSS-Questions +1 More Similar Reads How to center contents of an HTML table ? To center content in an HTML table, add text-align: center; CSS for each cell or use align="center" it in the <td> tags. This keeps text in the middle.Syntaxtext-align: left;Property ValueValuesDescriptioninitialIt is the default value.inheritIt sets the value to the parent's element property 1 min read How to Add Checkbox in HTML Table ? Adding checkboxes to an HTML table can be useful for various purposes, such as selecting multiple rows for batch processing or toggling the state of individual items. In this article, we will explore two methods to add checkboxes to an HTML table i.e. using basic HTML and JavaScript for dynamic inte 2 min read How to Center a Table in Google Docs Ever wish your tables in Google Docs could be the center of attention? Well, good news! Imagine your info standing tall, right in the middle, no more hiding on the sides. Google Docs tends to keep things to the left, but we're here to break the norm. In this guide, we're not just talking about cente 6 min read How to Get a Table Like Row/Column Alignment in a Flexbox ? Getting a table-like row/column alignment in Flexbox refers to structuring content similarly to traditional tables, but with more flexibility. Flexbox allows items to align in rows and columns dynamically, offering responsive control over spacing, alignment, and positioning, ideal for modern layouts 3 min read How to Create Header Cell in a Table using HTML? A header cell in a table made with <th> tag is used to label columns or rows, helping organize information. To create a header cell in an HTML table, use the <th> element. Header cells typically contain titles for each column or row, and they are bold by default.Syntax<th> Contents 1 min read How to Center a Table with CSS ? Here are different ways to center table in CSS.1. Center a Table using margin auto propertyThe CSS margin is used to set the space around the element. The margin auto enables dynamic and equal margins from both sides and center the element. Syntaxtable { margin: auto;}By setting the margin auto the 2 min read Like