HomeХобби и стильRelated VideosMore From: Internet Services and Social Networks Tutorials from HowTech

How to Change HTML Table Border Style

42 ratings | 16476 views
Follow this tutorial to learn how to change the border of your HTML table in different border styles and to apply other styling techniques. Don't forget to check out our site http://howtech.tv/ for more free how-to videos! http://youtube.com/ithowtovids - our feed http://www.facebook.com/howtechtv - join us on facebook https://plus.google.com/103440382717658277879 - our group in Google+ In this tutorial on "how to change the Table Border style in HTML", we will teach you how to change the border of your HTML table. Border style of an HTML table can be changed by changing the style attribute in a table element. The style of the border is specified in the Cascading Style Sheets. There are a lot of border properties which can be applied to tables to create different border styles of the tables and their cells. Here in this tutorial we will discuss those various styles used in html for table borders. Step 1: Set Standard Border of a Table In order to set a standard border of a table, we set borders in the style attributes and the width of the border as 1 px. The third option lets us specify the color of the border. These three options can be used in html for table borders . Standard borders are 1 px in width and solid black in color. Step 2: Set Border around cells A standard border is a black outline around the table. In order to set a border around a cell of the table, we set the style as a border in the cell separately. The same is the case with the width of the border and the color of the border. The three options can altered for each of the cells separately to create different styles of border. Step 3: Removing Double Lines in a Border If the borders have been set twice, a double line will appear at the border. In order to set a single border, we apply the Cascading Style Sheet's border collapse property in the style attribute of each cell, separately. Step 4: Other Border Properties There are a lot of other properties of table border styles in HTML which can be applied to tables and their cells. Borders can be made curvy and aligned to one side of the table by using these border properties.
Html code for embedding videos on your blog
Text Comments (8)
Boss Ji (1 year ago)
Very clear, thanks.
Meet Sorathia (1 year ago)
Good job sir, nicely explained ...
aiq huerta (1 year ago)
style is under the .CSS , right ?
AVION BEIRUT (2 years ago)
hi, how do you make the border hairline thick?
Mark Anders (3 years ago)
You can also get the same effect by only adjusting the table tag as below and not placing any styles in the td or tr tags. <table border="1" style="border-collapse:collapse"> The 'table border' by itself creates the double borders. The 'table border' plus the style 'border collapse' creates the single borders.
Key Board Warrior (3 years ago)
Is this HTML 5?
sadman hoque (4 years ago)
I did just the same as you but can't get the border around the individual cells. btw I'm using CSS to modify the table
sadman hoque (4 years ago)
nevermind!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.