Muy buena página para ensayar estilos de tablas y html
Table Border
This page demonstrates how to set the table border within your web pages and other HTML documents.
In HTML, there are two ways of adding a border to your tables. The first is to use the HTML
border attribute. The other is to use CSS.
Below are some examples of applying a table border in HTML.
HTML Table Border
You can get a quick border around your table by using the HTML
border
attribute. You determine the width of the border using a number. For
example, for a thin border, use the number "1". For a thicker border,
use a greater number.
Like this:
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
As you can see, this is a quick and easy way to get a table border,
but you don't actually have any control over the way the border looks.
The way it looks will depend on the user's browser and you won't be able
to change it. Unless...
If you want to change the way your table border looks, you can use
CSS. CSS allows you to change the color, width, and style of your table
borders.
Using CSS, you use the
border property to define the
table border. You can apply this property against the whole table or
each cell (or a single cell, if that's what you prefer).
Examples below.
CSS Table Border
When you apply CSS border code to the table element (i.e. the
<table> tag), the border only appears around the actual table - not the individual cells.
Like this:
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
You can also change the border style to thick, dotted, dashed, or
anything that CSS understands. You can change its color too. Here's some
examples:
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
Borders on Table Cells
To the table cells within the table, you need to apply the border code against the individual table cells.
In the following example, I've applied a border against the table
cells and the table header cells. I've also applied a different colored
border around the table (as I did in the previous example). The
different color will help distinguish between the table border and the
cell borders:
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
Border Collapse
You can remove the space between the different borders by using the CSS
border-collapse property. You can apply this property against the HTML table element.
When you apply this against the table element, you'll notice that the
table border simply disappears, or "collapses". You'll also notice that
the space between the cells collapse too.
Example:
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
Using CSS Classes
If you're familiar with HTML and CSS, you'll probably know about the
benefits of CSS classes. CSS classes allow you to set all your styles in
one place, rather than adding them to each HTML element as you code.
This saves time in coding and time in maintaining your website. It also
reduces the possibility of error, helps with download time, and helps
keep your code nice and clean.
Here's an example of using an embedded style sheet to define the
border of your HTML tables. Note that the styles are set in between the
<style></style> tags.
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
Another Example
Here are more examples of using CSS borders around your HTML tables.
|
|
| Table Header | Table Header |
| Table cell 1 | Table cell 2 |
| Table cell 3 | Table cell 4 |
|
No hay comentarios:
Publicar un comentario