Learning Web Design

Table Examples

Check out these w3schools sites that show how to use CSS to style tables:

https://www.w3schools.com/css/css_table.asp

https://www.w3schools.com/cssref/pr_text_text-align.ASP

https://www.w3schools.com/cssref/pr_border-collapse.asp

Here is a sample table:

<!DOCTYPE html>

<head>

<title>Sample Table</title>

<style>

table, td, th {

border: 5px solid green;

}

table {

border-collapse: collapse;

width: 100%;

}

</style>

</head>

<body>

<table>

<tbody>

<tr>

This is a very interesting newsletter<br>

This is a very interesting newsletter<br></td>

</tr>

<tr>

This is the first column<br>

This is the first column<br></td>

This is the middle column<br>

This is the middle column<br></td>

This is the last column<br>

This is the last column<br></td>

</tr>

</tbody>

</table>

</body>

</html>

Vertical Line and Two Columns examples

The following is an example of two columns separated by a vertical line:

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

/* Create two unequal columns that floats next to each other */

.column {

float: left;

padding: 10px;

height: 300px; /* Should be removed. Only for demonstration */

}

.left {

width: 25%;

}

.right {

width: 75%;

}

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;

}

.vl {

border-left: 6px solid blue;

height: 500px;

position: absolute;

left: 25%;

margin-left: -3px;

margin-top: 67px;

top: 0;

}

</style>

</head>

<body>

<h2>Two Unequal Columns</h2>

<h2>Column 1</h2>

</div>

<h2>Column 2</h2>

</div>

</body>

</html>

The result should appear as this:

Report abuse