March 1Mar 1 Administrators CSS Tables HTML tables can be greatly improved with CSS: Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Königlich Essen Philip Cramer Germany Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italy Try it Yourself » CSS Table Borders The CSS border property is used to specify the width, style, and color of table borders. The border property is a shorthand property for: border-width - sets the width of the border border-style - sets the style of the border (required) border-color - sets the color of the border The example below specifies a 1px solid border for <table>, <th>, and <td> elements: Firstname Lastname Peter Griffin Lois Griffin Example table, th, td { border: 1px solid; } Try it Yourself » CSS Table Border Color The example below specifies a 1px solid green border for <table>, <th>, and <td> elements: Firstname Lastname Peter Griffin Lois Griffin Example table, th, td { border: 1px solid green; } Try it Yourself » Why Double Borders? Notice that the tables in the examples above have double borders. This is because both the <table>, <th>, and <td> elements have separate borders. To remove double borders, take a look at the example below. CSS Collapse Table Borders The CSS border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML. This property can have one of the following values: separate - Default value. Borders are separated; each cell will display its own borders collapse - Borders are collapsed into a single border when possible The following table has collapsed borders: Firstname Lastname Peter Griffin Lois Griffin Example Using the border-collapse property: table { border-collapse: collapse; } Try it Yourself » CSS Table Padding To control the space between the border and the content in a table, use the padding property on <td> and <th> elements: First Name Last Name Savings Peter Griffin $100 Lois Griffin $150 Joe Swanson $300 Example th, td { padding: 10px;} Try it Yourself » CSS Border Spacing The CSS border-spacing property sets the distance between the borders of adjacent cells. Note: This property works only when border-collapse is set to "separate". The following table has a border-spacing of 15px: Firstname Lastname Peter Griffin Lois Griffin Example Using the border-spacing property: table { border-collapse: separate; border-spacing: 15px;} Try it Yourself » CSS Outside Table Borders If you just want a border around the table (not inside), you specify the border property only for the <table> element: Firstname Lastname Peter Griffin Lois Griffin Example table { border: 1px solid; } Try it Yourself » ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.