HTML and CSS Rows and Columns Blog
Using HTML to Display Rows and Columns
A James Sturdevant tutorial
Introduction
Have you ever looked at a website and wondered how it was made to look so nice? No? That’s alright. If you have come to this blog post, you are probably already aware of HTML and CSS, but just be safe, I will give a brief overview of what each one of these coding languages is used for so we are all on the same page.
HTML
In order to better understand HTML, it is helpful to know what it stands for: HyperText Markup Language. According to Mozilla—a source much more reputable than myself—it “is the most basic building block of the Web. It defines the meaning and structure of web content.” Mozilla further explains that “‘Hypertext’ refers to links that connect web pages to one another, either within a single website or between websites.” Essentially, the World Wide Web (the www from all your favorite www. websites) runs on these hypertext links that allow us to access different web pages. HTML is what adds structure to these web pages, as it allows us to mark them up with element tags that serve certain functions. In their most basic form, element tags consist of the name of the element enclosed in “<>” followed by the content of the element and then the name of the element enclosed in “</>”. For example, a paragraph looks like this:
<p>My Paragraph</p>
I will refrain from getting into the details of how HTML elements do what they do (I don't really know the answer), but luckily some very smart people have given us HTML so that we can easily create web pages by using these elements to structure our content. If you are interested in learning more, I would recommend reading through the additional content of the linked article from Mozilla.
CSS
HTML pages on their own look very boring. In fact, they look a lot like a word document, just with the potential to add some fancy features. You have probably noticed that most websites, despite using HTML, do not look like word documents at all. This is thanks to CSS.
CSS stands for cascading stylesheets because it adds style and does so in cascading fashion. CSS is all about how a web page looks. It can define the appearance of HTML elements with rules. These rules can be applied in a variety of ways, but since more than one rule can technically apply to the same HTML element, there has to be a way for your browser to determine which rule should be used if they contradict. For example, an HTML element may have two rules that declare what color it should be. Instead of displaying a mix of the two colors—as fun as that would be—the browser picks whichever rule is “closer” to the element (see this StackOverflow discussion for more info).
In order to understand what closeness means in CSS, you need to know how rules can be applied. A CSS rule typically consists of three things: a selector, a property, and a value. The selector indicates which html element to apply the rule to, the property indicates what to change about it, and the value indicates how to change it. For example, if I wanted to make my paragraph elements blue and have an underline, I would write this:
p {
color: blue;
text-decoration: underline;
}
The above rule would apply to all the <p> elements on my web page. The fun thing about CSS rules is that they can be inherited by other elements. Using the previous example, if there were another element inside one of my paragraphs, it would also be blue. That is where the cascading comes in. The more directly a rule is applied to an element, the higher precedence it will take. Rules are applied through different selectors. The example I showed used a “type” or “element” selector that targets a specific type of HTML element (hence the two names for it). If you want your style to apply to more than just one type of element, you can use classes. A class is set in an HTML element and is defined in CSS with a “.” in front of it. If you want a rule to only apply to one specific instance of an element, you can use an id rule, which can only be applied once and is preceded by a “#”. Here is an example of these types of rules and how they can be applied to an HTML element:
.class {
color: yellow;
Font-size: 16pt; }
#id {
color: green;
}
<p class = “class” id = “id”>My Paragraph</p>
Important note: make sure to put a space between your selector and your “{“. If you don’t, the rule will not work. Trust me, I spent a long time figuring that one out. Anyway, what would this example look like? Well, the paragraph has three rules applied to it, but they have a different order of precedence. Since the id is the most specific, it will be green even though the type and class rules both indicate colors as well; however, since these rules also affect properties that the others don’t, those parts of the rules will be applied. That sounds a little confusing, I know, so if you want a more comprehensive explanation of how CSS selectors work, please visit our friends at Mozilla again. In short, the paragraph will be green, haven and underline, and have a font size of 16pt.
One last note before getting into what you came here for: there are three ways to apply CSS. Inline CSS, (which is applied directly within a specific HTML element), within a style element (which is included within the HTML document), and in an external stylesheet that just consists of CSS rules. An external stylesheet is usually the best way to implement CSS, as it can be linked in multiple CSS pages. Using style elements is fine within one HTML page if you don’t think you’ll need those styles again. Inline CSS is not efficient at all, so just avoid using it. It might seem convenient, but it will ruin your life later on if you want to apply those styles to another document. Here is an article from W3schools that explains each method for applying CSS to your HTML document.
Making Rows and Columns with CSS
So, you made it through my lengthy introduction (or you didn’t need it all. Go you.) and you have made it to what you came for: a tutorial for making Rows and Columns in HTML using CSS.
In order to get started, fire up whichever IDE you prefer (I use Visual Studio Code since it is effective and free). Make a new folder with two documents: an HTML file called “tutorial.html” and a CSS stylesheet titled “tutorial.css”. It is essential that these two files be in the same folder so that you can easily link the tutorial.css stylesheet to your tutorial.html page. If you have them in separate folders, you will have to include the whole file path to the tutorial.css file when you link to it, and it is easy to make mistakes doing that, so just avoid it. Now, if you have an AI copilot, ask it to give you a basic HTML document, or you can just copy this one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tutorial</title>
<link rel="stylesheet" href="tutorial.css">
</head>
<body>
<<h1>Columns and Rows</h1>
</body>
</html>
If you open your tutorial.html file you should get something that looks like this:
Wow! Just a blank page with a title…Time to make it more interesting. Our goal today is to organize some HTML elements into rows and columns. Well, interestingly enough, there are HTML elements that already exist for that exact purpose! The <table> element and its relatives the <tr> (table row), <th> (table header), and <td> (table data) elements. For a more in depth discussion of these elements see this article from W3Schools, who will be your best friend for the rest of this tutorial. So, go ahead and insert the following lines of code after the <h1> header in your HTML document:
<table>
<tr>
<th>*Your Column Name 1*</th>
<th>*Your Column Name 2*</th>
<th>*Your Column Name 3*</th>
</tr>
<tr>
<td>
text
</td>
<td>
text
</td>
<td>
text
</td>
<tr>
</table>
This will give you a table with two rows and three columns. Using <th> makes the content a header, which automatically makes it bold and centered. Containing the content in <tr> tags makes it a row. Using <td> tags with some text basically just makes a paragraph element, but when contained within <tr> tags, <td> elements act as the content for the rows of a column. This table has three headers and three <td> elements in its two <tr> elements. In order to see what the format will look like, add some text to the <td> elements. I recommend grabbing a paragraph from the Lorem Ipsum generator website and replacing my text place holders with it. What you now have should look like this:
As you can see, our page still looks very plain, but it now has a table with rows and columns. It would not be hard to imagine making a website that has the feel of a magazine or newspaper (an observation made by W3Schools about a similar layout), but so far, that is about as far as we have come: a newspaper. Boring. Let’s make the page a little more interesting with some CSS.
Open your tutorial.css file and add in the following lines of code:
:root {
background-color: lightgrey;
}
h1 {
text-align: center;
}
Make sure to add this to the <head> element of your HTML document, otherwise the styles won’t apply.
Recommended by LinkedIn
<link rel="stylesheet" href="tutorial.css">
Now, to explain the styles we added. Using :root gives you a baseline for all your HTML elements. Any properties changed with the :root selector will become the default rules for every element, unless any other rule is specified. Feel free to make the background color something else. Now, looking at the h1 rule, you may notice that it is a type selector. This means it would apply to any <h1> element in our HTML document. This page will only use one <h1> element, so feel free to practice using a class or id rule and applying it to our <h1> header. Make sure to include id=”yourid” or class=”yourclass” in the opening tag of the <h1> element if you choose to do so. You’ll notice the only property updated in this rule is the text-align property. This makes it so that the header will appear centered on the page. If, for some reason, you don’t like your text to be centered, please see this article from W3Schools about other ways to align your text. Anyway, here is what your page should look like now:
This is a little more interesting, but still feels a little like a grey newspaper. Let’s style the content in our columns some more. I personally don’t like the alignment of our lorem ipsum paragraphs. Add the following style rule to your CSS:
td {
border-style: solid;
text-align: justify;
padding: 10px;
}
Justifying the text makes it so that each line of text ends at the same place, making the text more rectangular. Adding a solid border-style will surround the text with a rectangle that will default to black unless otherwise specified (if you want to try a different type of border look at this W3Schools article). Increasing the padding to 10px makes it so that the border is not right on top of the text (for more information about padding check out this W3Schools article). Here is what you should have now:
This is starting to feel slightly more interesting. In fact, if you would like to make this feel more like a spreadsheet table, you can add borders to the table and th elements:
th {
border-style: solid;
}
table {
border-style: solid;
}
So there you have it! You can now create tables in your HTML documents and style them with CSS. Before you go I want to emphasize that you do not have to only use text in tables. We can actually add any HTML element we want into our <td> tags. Let’s replace the middle column with an image. You’ll want to put some kind of image file in the folder with your tutorial.css and tutorial.html files. I have chosen a very safe, public domain image. One you have your image in the folder, replace the lorem ipsum text in your second set of <td> tags like this:
<td>
<img src="Public_Domain_Symbol.png" alt = "image">
</td>
The img tag is self contained, so it does not need an </img> closing tag. SRC stands for source, so make sure to put the exact name of the image file in quotes after it. ALT here sets the text that is displayed if the image cannot be displayed for some reason. Here is what your page should look like now:
Well would you look at that, a giant image (a copyright free image that is). That messes things up a little bit. We can easily fix this though, by setting the size of the image. Add this rule to your stylesheet:
img {
width: 250px;
height: 250px;
}
Your image should now be much smaller:
You may think it looks a little strange to have the border around the image. If you would like to remove the border from any other HTML element you would like to add to your table, you can create the following class and add it to the opening <td> tag that contains the element:
.noBorder {
border-style: none;
}
<td class="noBorder">
<img src="Public_Domain_Symbol.png" alt = "image">
</td>
In fact you can make a class to supersede any of the type selector classes we made today. Here is what this one looks like:
We did it! You did it! I am so proud of you. You now know how to style your rows and columns with different HTML elements. You can now add rows ad infinitum:
(You would probably want to change the content of the additional rows, but hey, you do you).
Recap
Before you go, let’s recap what you learned today. If you had no knowledge of HTML or CSS before, hopefully you now understand some basics of these languages, what they are used for, and how to apply them to make a web page with a table. You should have learned how to structure the table element in HTML with the <tr>, <th>, and <td> tags. Additionally, you should have learned how to style these elements with borders, text alignment, and padding to make them look a little better. Finally, you should have learned how to include an image in a table. Hopefully, you can now go on to add whatever HTML elements you would like to your table. Thank you for reading :)
Additional Resources (In order of appearance)