Embedded Files
There are several online table generators that help you produce the type of tables you need for your websites. Here are a few.
There are several online table generators that help you produce the type of tables you need for your websites. Here are a few.
HTML and CSS Demonstrators
html-online.com <-- Highly recommended
html5-editor.net <-- Highly recommended
Table-only online generators
Responsive
Other table generators
https://www.html.am/html-generators/html-table-generator.cfm
https://www.tablesgenerator.com/ -- NOTE: when using this table generator, you will notice that it also provides a <style> section with all four of the CSS class descriptors that are used in the table markup. These are optional, and can be removed.
Table generation example:
Table generation example:
Using the website html-online.com and creating a table with three columns and four rows gives you the following HTML markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Table</title>
</head>
<body>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
</tr>
<tr>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
</tr>
<tr>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
</tr>
<tr>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
</tr>
</tbody>
</table>
</body>
</html>
When you copy this into Sublime, and then save it as table.html (for example), you get the following when you open it in your web browser:
Note: The table generator uses the HTML attribute and value order="1" in the table element. This is technically incorrect, because the correct way to specify a table border is to use CSS:
<style>
table, th, td {
border: 1px solid black;
}
</style>
The CSS width: 100%; allows the table to stretch across the width of the page.
Because there is no content (text, images, videos, etc.) in the table cells, the table has no vertical height. The table will expand to fill the content of its cells.
Here is another table that has been made to fill the width of the screen:
Here is another table that has been made to fill the width of the screen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Table</title>
<style>
</style>
</head>
<body>
<table style="width: 100%;" border="2">
<tbody>
<tr>
<td style="width: 100%; text-align:center;" colspan="3">
This is a very interesting newsletter<br>
This is a very interesting newsletter<br>
</td>
</tr>
<tr>
<td style="width: 25%; text-align:center;">
This is the first column<br>
This is the first column<br>
This is the first column<br>
</td>
<td style="width: 50%; text-align:center;">
This is the middle column<br>
This is the middle column<br>
This is the middle column<br>
</td>
<td style="width: 25%; text-align:center;">
This is the last column<br>
This is the last column<br>
This is the last column<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>
And this is how it looks in a web browser:
Here is another example:
Here is another example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Table</title>
<style>
table, td, th {
border: 4px solid green;
}
table {
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<!-- <table style="width: 100%;" border="2"> -->
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 100%; text-align:center;" colspan="3">
This is a very interesting newsletter<br>
This is a very interesting newsletter<br></td>
</tr>
<tr>
<td style="width: 25%; height: 200px; text-align:justify;">
This is the first column<br>
This is the first column<br>
This is the first column<br></td>
<td style="width: 50%; text-align:center; vertical-align: top;">
This is the middle column<br>
This is the middle column<br>
This is the middle column<br></td>
<td style="width: 25%; text-align:right;">
This is the last column<br>
This is the last column<br>
This is the last column<br></td>
</tr>
</tbody>
</table>
</body>
</html>
And this is what it looks like:
Report abuse