In this tutorial we will show you the solution of HTML table column width, in HTML we already discuss that how to make a table in html and also how to change border colors etc.
Form these our today article is also based on table. And in this article we discuss that how we are able to customize the table column width in html.
We hope that you understand our previous articles.
Step By Step Guide On HTML Table Column Width :-
As, we already discuss about the components of a table like what is table, tr, th and td. And know about the rows in table are horizontal and columns are vertical.
Today we want to discuss about the table column width and it is too much easy as to make a table in html.
This can be done with the help of Style attribute in html and within the tag in which you can customize the width.
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <table border="1px"> <tr> <td> column one, row one </td> <td style="width: 500px;"> column two, row one </td> <td> column three, row one </td> <td> column four, row one </td> </tr> <tr> <td> column one, row two </td> <td> column two, row two </td> <td> column three, row two </td> <td style="width: 10px;"> column four, row two </td> </tr> <tr> <td> column one, row three </td> <td > column two, row three </td> <td> column three, row three </td> <td> column four, row three </td> </tr> <tr> <td style="width: 160px;"> column one, row four </td> <td> column two, row four </td> <td> column three, row four </td> <td> column four, row four </td> </tr> </table> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Hence, here we specifies the way with the help of which article can be done.
- In this, we want to say that you have to apply width to any one cell in column. If you apply properties on more than one then they override. You can apply different width to different columns.
- This is done with the help of width attribute and the value to this can be given in percentage and in pixels also. In which you want to apply.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we want to say that customize the width of column in table is as much easy as changing the font color of any tag. I hope this tutorial on HTML table column width helps you.
About Dikshita
