HTML Table Column Width - Tutorial Kart
Có thể bạn quan tâm
HTML Table Column Width
To specify width to a column, set the CSS width property of column heading th or any of the cell td in the respective column.
Refer CSS width property tutorial to know about valid width values and examples.
By default, the content decides the width of the table. If the content is larger than the width of its parent, then the content is wrapped in more than one line.
Examples
Column Width of 200px
In the following example, we specify a width of 200px for the first column. We have provided the width as inline-css.
index.html
<!DOCTYPE html> <html lang="en"> <head> <style> table, th, td { border: 1px solid red; border-collapse: collapse; } </style> </head> <body> <table> <thead> <th style="width:200px">Name</th> <th>Quantity</th> </thead> <tbody> <tr> <td>Apple</td> <td>25</td> </tr> <tr> <td>Banana</td> <td>18</td> </tr> </tbody> </table> </body> </html>Column Width of 10em
In the following example, we specify a width of 10em for the first column, and a width of 7em for the second column. We have provided the width as inline-css.
index.html
<!DOCTYPE html> <html lang="en"> <head> <style> table, th, td { border: 1px solid red; border-collapse: collapse; } </style> </head> <body> <table> <thead> <th style="width:10em">Name</th> <th style="width:7em">Quantity</th> </thead> <tbody> <tr> <td>Apple</td> <td>25</td> </tr> <tr> <td>Banana</td> <td>18</td> </tr> </tbody> </table> </body> </html>Column Width via Cell (td)
Not only using th, but we can also set the column width by specifying width for any cell (td tag) in that column.
index.html
<!DOCTYPE html> <html lang="en"> <head> <style> table, th, td { border: 1px solid red; border-collapse: collapse; } </style> </head> <body> <table> <thead> <th>Name</th> <th>Quantity</th> </thead> <tbody> <tr> <td style="width:200px">Apple</td> <td>25</td> </tr> <tr> <td>Banana</td> <td>18</td> </tr> </tbody> </table> </body> </html>Conclusion
In this HTML Tutorial, we learned how to set a specific width for column of HTML table, with examples.
Từ khóa » Html Table Tag Column Width
-
HTML Table Sizes - W3Schools
-
HTML Col Tag - W3Schools
-
Setting Table Column Width - Html - Stack Overflow
-
How To Set Fixed Width For
In A Table ? - GeeksforGeeks Changing Column Width - The Complete HTML5 Tutorial
Stop Using To Set Table Width In HTML: Here's Why »
Table-layout - CSS: Cascading Style Sheets - MDN Web Docs
: The Table Column Element - HTML - MDN Web Docs - Mozilla Making A Wild Card Column Width - Tables
How To Set HTML Table Width And Height
Advanced Table Settings: Column Width, Alignment And Merging Cells
Tables In HTML Documents
Html Table Column Width Code Example - Code Grepper
HTML Tables: All There Is To Know About Them - FreeCodeCamp
Copyright © 2022 | Thiết Kế Truyền Hình Cáp Sông Thu