HTML | Width Attribute - GeeksforGeeks

Trang chủ » Html Td Column Size » HTML | Width Attribute - GeeksforGeeks

Có thể bạn quan tâm

Skip to content geeksforgeeks
  • Courses
    • DSA Courses
    • Programming Languages
  • Tutorials
    • Python Tutorial
      • Python Loops and Control Flow
    • Java
      • Java Interview Questions
      • Java Quiz
      • Advance Java
    • Programming Languages
    • System Design
    • Interview Corner
    • Computer Science Subjects
    • DevOps
    • Linux
    • Software Testing
    • Databases
    • Android
    • Excel
    • Mathematics
  • DSA
    • Data Structures
    • Algorithms
      • Analysis of Algorithms
      • Searching Algorithms
      • Sorting Algorithms
    • Practice
      • Company Wise Coding Practice
      • Practice Problems Difficulty Wise
      • Language Wise Coding Practice
      • Curated DSA Lists
    • Company Wise SDE Sheets
    • DSA Cheat Sheets
    • Puzzles
  • Data Science
    • Data Science Packages
    • Data Visualization
    • Data Analysis
  • Web Tech
    • Web Development Using Python
      • Django
      • Flask
    • Cheat Sheets
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
▲ Open In App HTML <td> width Attribute Last Updated : 24 Sep, 2024 Summarize Comments Improve Suggest changes Like Article Like Save Share Report Follow

The HTML <td> width attribute was traditionally used to specify the width of a table cell. If this attribute is not set, the cell automatically adjusts its width based on the content it contains. This attribute provides flexibility as it accepts values in both pixels and percentages, allowing developers to control the layout and responsiveness of the table element.

However, it is important to note that the <td> width attribute is not supported in HTML5. We have new ways now that favor the use of CSS for styling table elements, including specifying width.

Note: The <td> width Attribute is not supported by HTML5.

Syntax

<td width="pixels | %">

Attribute Values

Attribute Values

Descriptions

pixels

It sets the width of the table in terms of pixels.

%

It sets the width of the table in terms of percentage (%).

Example 1: Using Pixels for <td> Width

In the following example, we set the width of the first column in pixels.

html <!DOCTYPE html> <html> <head> <title> HTML td width Attribute </title> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3 style="color: crimson;"> HTML td width Attribute </h3> <table border="1" width="500"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td width="50%">BITTU</td> <td width="20%">22</td> <td width="30%">CSE</td> </tr> <tr> <td>RAKESH</td> <td>25</td> <td>EC</td> </tr> </table> </center> </body> </html>

Output:

Screenshot-2023-12-14-121127

Example 2: Using Percentage for <td> Width

In this example, we set the width of the first column as a percentage of the total table width.

HTML <!DOCTYPE html> <html> <head> <title> HTML td width Attribute </title> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3 style="color: crimson;"> HTML td width Attribute </h3> <table border="1" width="80%"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td width="40%">BITTU</td> <td width="30%">22</td> <td width="30%">CSE</td> </tr> <tr> <td width="60%">RAKESH</td> <td width="20%">25</td> <td width="20%">EC</td> </tr> </table> </center> </body> </html>

Output:

Screenshot-2023-12-14-121552

Important Note on HTML5

The <td> width attribute is deprecated in HTML5, meaning it is no longer supported in modern web development. Instead of using the width attribute in the <td> element, developers should now use CSS to control the width of table cells for better styling and responsiveness.

Here’s an example of how to set the width of a table cell using CSS:

HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table Cell Width Using CSS</title> <style> td{ width:200px;/* Example of setting width in CSS */ } </style> </head> <body> <table border="1"> <tr> <td>Cell with width set using CSS</td> <td>Another cell</td> </tr> <tr> <td>Cell with width set using CSS</td> <td>Another cell</td> </tr> </table> </body> </html>

Output:

Screenshot-2024-09-24-153852

Supported Browsers

  • Google Chrome 1 and above
  • Microsoft Edge 12 and above
  • Firefox 1 and above
  • Opera 12.1 and above
  • Safari 1 and above

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

Comment More info Next Article HTML <th> width Attribute author jit_t Follow Improve Article Tags :
  • HTML
  • Web Technologies
  • HTML-Attributes

Similar Reads

  • HTML <td> width Attribute The HTML <td> width attribute was traditionally used to specify the width of a table cell. If this attribute is not set, the cell automatically adjusts its width based on the content it contains. This attribute provides flexibility as it accepts values in both pixels and percentages, allowing 3 min read
  • HTML <th> width Attribute The HTML <th> width Attribute is used to specify the width of a table header cell. If the width attribute is not set then it takes the default width according to the content. Syntax:<th width="pixels | %">Attribute Values:Attributes values Description pixels It sets the width of the tabl 2 min read
  • HTML | <pre> width Attribute The HTML <pre> width Attribute is used to specify the maximum number of characters per line. Note: The width Attribute is not supported by HTML5 Syntax: <pre width="number"> Attribute Values: number: It is used to set the maximum number of characters. Example: <!DOCTYPE html> <h 1 min read
  • HTML <table> width Attribute The HTML <table> element's width attribute specifies the width of the table. It can accept values in pixels or percentages. However, in HTML5, it is recommended to control table width using CSS instead. Syntax<table width="pixels | %">Attribute Valuespixels: It sets the width of the tabl 2 min read
  • HTML <video> width Attribute HTML <video> width Attribute is used to specify the width of the video display area in pixels of its container element's width. Note: Always specify the width and the height of the video else the web page will be confused about how much space that video will require due to that reason web page 1 min read
  • HTML <object> width Attribute The HTML <object> width attribute is used to specify the horizontal dimension of the embedded object, defining the width of the displayed content within the webpage. Syntax: <object width="pixels">Attribute Values: pixels: It holds the width of the object in terms of pixels.The below exa 1 min read
  • HTML | <input> width Attribute The HTML <input> width Attribute is used to specify the width of the <input> element. This Attribute is only used for input type="image". Syntax: <input width="pixels"> Attribute Values: It contains the value i.e pixels which specify the width of the input Element. Example: C/C++ C 1 min read
  • HTML | <col> width Attribute The HTML <col> width Attribute is used to specify the width of a column element. If width attribute is not set then it takes default width according to content. It is not supported by HTML 5. Syntax: <col width="pixels | % | relative_length"> Attribute Values: pixels: It sets the width o 1 min read
  • HTML <img> width Attribute Width attribute in HTML <img> tags specifies the width of the image element in pixels or as a percentage of its containing element's width, controlling its visual size on the webpage. Syntax: <img width="pixels">Attribute Values: They contain single value pixels which specify the width o 1 min read
  • HTML | <embed> width Attribute The HTML embed width attribute is used to specify the width of the embedded content. Syntax: <embed width="pixels"> Attribute Values: pixels: The width of embed value are set in terms of pixels. It is used to specify the width of embedded content. Example: C/C++ Code &lt;!DOCTYPE html& 1 min read
  • HTML <td> valign Attribute The HTML <td> valign attribute specifies the vertical alignment of content within a table cell. It can accept values such as top, middle, bottom, or baseline to control the positioning of content. If not explicitly set, the content in a table cell is vertically aligned to the middle by default 2 min read
  • HTML | <iframe> width Attribute The HTML <iframe> width attribute is used to specify the width of the <iframe> in terms of pixels. Syntax: <iframe width="pixels"> Attribute Values: It contains single value pixel which specifies the width of the iframes in terms of pixels. Below example illustrates the use of < 1 min read
  • HTML <canvas> width Attribute The HTML <canvas> width Attribute is used to specify the width of the <canvas> in terms of pixels. Syntax: <canvas width="pixels"> Attribute Values: It contains the value i.e pixels which specify the width of the canvas in terms of pixel. It has a Default value which is 300. Exampl 1 min read
  • HTML | <th> scope Attribute The HTML <th> scope Attribute is used to specify the header cell is used for header row, column, colgroup or rowgroup. This attribute does not display any visual effect on the browser but it is used for screen readers. Syntax: <th scope="col | row | colgroup | rowgroup"> Attribute Values 1 min read
  • HTML <colgroup> width Attribute The HTML <colgroup> width Attribute is used to specify the width of the colgroup element. The <colgroup> attribute sets a predefined width of the column group. Syntax<colgroup width="pixels|%|relative_lngth">Attribute ValuesValue Description pixels It specify the width of the colgr 1 min read
  • HTML | <td> char Attribute The HTML <td> char Attribute is used to specify the alignment to the character of content in a table cell. This attribute only contains char align attribute. Its default value is a decimal point for page language. It is not supported by HTML 5. Syntax: <td char="character"> Attribute Val 1 min read
  • HTML | <td> abbr Attribute The HTML <td> abbr attribute is used to specify the shorter version of the content. This attribute is not supported by HTML 5. It does not describe any visual effect but it is used by screen readers. Syntax: <td abbr="text"> Attribute Values: text: It contains the short description of ce 1 min read
  • HTML <th> char Attribute The HTML <th> char attribute is used to specify the alignment to the character of content in a table header cell. It only contains the char align attribute. Its default value is a decimal point for page language. Note: It is not supported by HTML5. Syntax: <th char="character"> Attribute 1 min read
  • HTML | <th> abbr Attribute The HTML <th> abbr Attribute is used to specify the shorter version of content in header cell. It does not describe any visual effect but it is used by screen readers. Syntax: <th abbr="text"> Attribute Values: text: It contains the short description of header cell content. Example: C/C+ 1 min read
Like three90RightbarBannerImg Explore More We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy Got It ! Lightbox Improvement Suggest changes Suggest Changes Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal. geeksforgeeks-suggest-icon Create Improvement Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all. geeksforgeeks-improvement-icon Suggest Changes min 4 words, max CharLimit:2000

What kind of Experience do you want to share?

Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences

Từ khóa » Html Td Column Size