How to Create a 5-Column Table CSS Website
Tables are old ways to format information on a Web page. Tables are constructed of rows and columns. The intersect of a row and column is a cell. Within these cells, webmasters are able to store text or form controls and present them to the user in a formatted, aligned area on the Web page. However, tables are hard to control on a page, so cascading style sheets (CSS) took over. CSS is a way to create table-like areas in a page without the demands and limitations of a table.
Other People Are Reading
Instructions
-
-
1
Open you favorite HTML text editor. For a simple editor, Notepad can be used. More advanced editors like Visual Studio color-code the HTML, so it's easier to read and edit when pages become several hundred lines.
-
2
Type the opening HTML code for the CSS table into the text editor. The first element of a table is the "<table>" tag. For CSS, it's the "<div>" tag. Below is the code to start the CSS table element:
<div style="width: 450px;"> </div>
This code creates a CSS table that will take up 450 pixels on the user's screen. -
-
3
Create the first cell and column in the CSS table. Embedded divs in the HTML code create the meat of the table. Each div placed within the first div will create a cell. Below is the code to make a one-cell table in CSS:
<div style="width: 450px;">
<div width: 50%;">First Cell</div>
</div>
The embedded div is a column that takes up 50% of the CSS table's width. -
4
Create the second cell to fill in the rest of the CSS table's width. Since only 50% of the table was filled in step 3, another div is created to fill in the rest of the table. This creates a table with two columns. Below is the code to create the second cell:
<div style="width: 450px;">
<div width: 50%;">First Cell</div>
<div width: 50%;">Second Cell</div>
</div> -
5
Press the "Ctrl" and the "S" key on your keyboard. This saves the file to your hard drive. Navigate to the location of your hard drive where the file was saved. Double-click it and the file will open in a browser window. You should see a table with two cells labeled "First Cell" and "Second Cell."
-
1
