How to Create Tables in HTML: Simple Steps for Beginners
Below are two examples of what this looks like. On the left are the codes for one table with a 2-pixel border and another table with an invisible border. The finished products are on the right.
Example one:
| See our products |
| Find out about us |
Example two:
| See our products |
| Find out about us |
Here’s a useful trick — design the table with a visible border, which will show you just how your elements are broken up. When you have everything in place, change the border attribute to 0.
SEE: AI-Generated Code is Causing Outages and Security Issues in Businesses (TechRepublic)
Create table layouts
Two attributes for laying out table content were cellpadding and cellspacing. However, in HTML 5, those attributes are no longer supported. That’s not a problem; using the style sheet language Cascading Style Sheets will help. CSS is good to know because it can be used to specify the presentation and styling of a document.
The CSS section in our example starts with and ends at . The wording should be self-explanatory, as the border is set at 2 pixels and is solid black, while the padding is set at 10 pixels. The latter controls the distance (in pixels) between the cell’s contents and its sides.
table {
border: 2px solid black;
border-collapse: collapse;
}
td {
padding: 10px;
}
| See our products |
| Find out about us |
Make cells the shape you want
HTML doesn’t stick you with plain grids for your table layout. With the rowspan and colspan attributes of the
For instance, the following table has two rows of three columns each:
| Cell contents | Cell contents | Cell contents |
| Cell contents | Cell contents | Cell contents |
To make the first cell span all three columns, add colspan=”3″ to its
| Cell contents | ||
| Cell contents | Cell contents | Cell contents |
If you’d like to make that first cell span two rows instead, add rowspan=”2″ to its
| Cell contents | Cell contents | Cell contents |
| Cell contents | Cell contents |
Of course, you can make your tables far more complex than these examples. If you choose to do so, it’s always a good idea to sketch out your tables before you create them.
Make cells the size you want
Table cells size themselves to their content by default. But what if you want cells of a different size? Enter the width and height attributes of the
Note that width and height are only suggested attributes. That is, they take effect only if the cell’s set width or height doesn’t conflict with other cells in the same column or row.
SEE: Quick Glossary: Web Browsers (TechRepublic Premium)
Precisely place cell contents
Once you start changing the shape and size of table cells, the cells no longer shape themselves around their contents. Thus, to place elements where you want within such table cells, you need two attributes of the
Note: when you’re placing objects in table cells, and you want them to align properly, don’t leave space after the opening
of a cell. The cell’s contents should touch the
Make your table colorful
Sick of having your table blend in with your page? Then change its background color! It used to be a case of adding the bgcolor attribute to the
| Cell contents | Cell contents |
| Cell contents | Cell contents |
Place your table on the page
In addition to formatting elements within a table, you can control where your table appears on the page. Two
Source link
/cdn.vox-cdn.com/uploads/chorus_asset/file/25772193/vizio_tv_on_wall.jpg)
