Scribd
Upload
34 views

Defining An HTML Table

The document discusses various ways to style HTML tables using CSS, including: 1) Adding borders with the border property; 2) Collapsing borders with border-collapse; 3) Adding padding to cells with the padding property. 4) Aligning table headings to the left with text-align. 5) Adding spacing between cells with border-spacing. 6) Making cells span multiple columns or rows using colspan and rowspan attributes. 7) Styling a specific table with an ID selector.

Uploaded by

antoni tito muñoz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

Defining An HTML Table

The document discusses various ways to style HTML tables using CSS, including: 1) Adding borders with the border property; 2) Collapsing borders with border-collapse; 3) Adding padding to cells with the padding property. 4) Aligning table headings to the left with text-align. 5) Adding spacing between cells with border-spacing. 6) Making cells span multiple columns or rows using colspan and rowspan attributes. 7) Styling a specific table with an ID selector.

Uploaded by

antoni tito muñoz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

IEST JOSÉ PARDO Diseño de Páginas Web

Carrera Profesional: Computación e Informática

Defining an HTML Table

An HTML table is defined with the <table> tag.


Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.
By default, table headings are bold and centered. A table data/cell is defined with
the <td> tag.

<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

Prof. Johnny Díaz Pág. 1


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

HTML Table - Adding a Border


If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:

Example
table, th, td {
border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h2>Bordered Table</h2>
<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>

Prof. Johnny Díaz Pág. 2


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

</table>

</body>
</html>

HTML Table - Collapsed Borders


If you want the borders to collapse into one border, add the CSS border-
collapse property:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse
property.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>

Prof. Johnny Díaz Pág. 3


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

HTML Table - Adding Cell Padding


Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:

Example
th, td {
padding: 15px;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>

Prof. Johnny Díaz Pág. 4


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the padding to 5px.</p>

</body>
</html>

Prof. Johnny Díaz Pág. 5


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

HTML Table - Left-align Headings


By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:

Example
th {
text-align: left;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>

<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>

Prof. Johnny Díaz Pág. 6


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

</tr>
</table>

</body>
</html>

HTML Table - Adding Border Spacing


Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:

Example
table {
border-spacing: 5px;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>

Prof. Johnny Díaz Pág. 7


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>

HTML Table - Cells that Span Many Columns


To make a cell span more than one column, use the colspan attribute:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Prof. Johnny Díaz Pág. 8


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<h2>Cell that spans two columns</h2>


<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

</body>
</html>

HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}

Prof. Johnny Díaz Pág. 9


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

</style>
</head>
<body>

<h2>Cell that spans two rows</h2>


<p>To make a cell span more than one row, use the rowspan attribute.</p>

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

</body>
</html>

A Special Style for One Table


To define a special style for a special table, add an id attribute to the table:

Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Prof. Johnny Díaz Pág. 10


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>

<table id="t01">
<tr>
<th>Firstname</th>

Prof. Johnny Díaz Pág. 11


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

Chapter Summary
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption

Prof. Johnny Díaz Pág. 12


IEST JOSÉ PARDO Diseño de Páginas Web
Carrera Profesional: Computación e Informática

Use the CSS border property to define a border


Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table

Prof. Johnny Díaz Pág. 13

You might also like