Blog Prompt #8: Dreamweaver DIY

For this blog post, I will show you how to create a table! In the event that you ever need to create a way to organize information on your website, this is the perfect way to keep it all together.

Step 1: Begin with your code of <table>. Insert this wherever you want it to appear. For mine, I put it underneath the picture and also the small paragraph underneath the picture.Screen Shot 2017-04-05 at 11.37.31 AM

Step 2: To create the top columns of your table, you’ll use <tr> initially and then hit enter and use <th> for each section of the first row. Keep in mind that when you use the <th> this will be bolded as the title of both columns (horizontally, not vertically). After you add your titles with <th>, you’ll close the </tr>.

Step 3: After you have the headings or the titles of your columns, you’ll add in the subsequent rows underneath each column. To add these in create another <tr>, but this time, instead of using <th>, you’ll use <td>. Again, when you’re adding these in, they add in horizontally, creating your first row across. To add each individual row, you will close the </tr> and begin a new one.

Screen Shot 2017-04-05 at 11.48.20 AMScreen Shot 2017-04-05 at 11.48.31 AM

Step 4: Close it up! Of course, once you’ve added all the columns and rows that your heart desires, don’t forget to close the table with </table>! Stay organized people!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s