4.2 Table & Comment Section

Hi guys, welcome back to Getting Started with Semantic UI. And in this lesson, I want to take a look at finishing off the About page. So the first thing I wanna take a look at is the table. Now, many people shy away from the table element in HTML. But, however, you need to understand that there is a balance. The table is not supposed to be used as a structure for a page. This is wrong. But, however, a table is very good for tubular or modular data, meaning the data conforms to a certain set of criteria divided up into columns and rows. It's very clean, very simple. And there's no point in you messing around with div elements and so on and so forth and then trying to do some CSS tricks to try and emulate a table. There's absolutely no point in doing this. A table is great for modular data. Now also this is going to involve part of the segment under the Elements header. And all it's doing is it's just wrapping around the table and providing a few styles that way. But you do have lots and lots of styles available to you with this segment, but I'm not going to go into it right now. I mainly wanna focus on the table. So with the table you can see here that we have many options available to us. So the first is, you know just one type it's a table and is a table element and it has a class of UI table segment then you have the table header. And the table header is basically telling us the sets of criteria. Then you have the main body which has the content that we're looking for really, which is the table rows and then the information relating to the criteria. And then you can also have a table footer. And right here, there is one table row, and there's a th in here that has a colspan of three. Which means it's going to span three columns, and then you can put, you know, buttons in there, inputs, whatever you would like. Then also you have States. This is a great way to illustrate data to the user. So for example, you can have Positive and Negative. Then also you can have Error. And again, you can apply that to a row or a particular table cell. You have Warning. You have active and then you have disabled if certain data is not required. And then also you have variations so with variations you can have a nice celled format where you have borders around each individual cell. You also have basic which strips away a lot of the styling and it doesn't have a segment around it. So we just have the very basic styling. Then you have the even width. So this will try to distribute the columns with even widths. So for example, the age column right here doesn't need that much room but it's still dividing it up nicely. And then you could also take a look at the column width. So we have the table can specify the width of individual columns independently. And then also you have collapsing which means that the table doesn't take up any more space than is required. Then you have the different colorings. So, for example, you can have inverted. You can have red and so on and so forth. You'll also have the definition. Then also you have the ability of sortable. So you can say ascending or descending. You also have padded as well. So this allows a bit more padding on the table rows. So the table rows are a bit more spaced out. Then also you have compact which is just the opposite of the padding. And then also you have this size, so you can have nice small text if you need to cram more information in, or you can make it large, so you have the class of small and large right there. So now that we have this information, let's take a look at inserting a table into the about page. So, as there's quite a bit of code in here, I've decided to put the code in and walk you through it. So, first of all we have the table with the class of UI table, and then also we have segment, which is optional, but I like having the segment there and you'll see why in just a second. And then also we have the three sections, you have a table header, the table body, and the table footer. So with the table header, and so there you'll have a table row. And then you'll have the table cells that identify the criteria of the data. Then we have the table body. Inside of there you have table rows, so we have three rows. And each of them contain three table cells, relating to the three table headers. And then also, we have the table footer. We have a table row. We have a th inside of there, with a colspan of three, so it spans across all three columns, and then I have a small black labeled button with an icon. And here's the icon and then it just says, add user. So if I go ahead and save that, and refresh it in the browser. That is basically what we get, something that looks real nice and clean. So what about a few of the options on the actual table itself? And then we can move on to, you know, individual cells and rows. So we have celled. So again that's adding that nice border in there on your cells. You also have the ability to have some basic styling. So I can say basic, and there we go, nice basic styling. Also you can specify how many columns, so, for example, you can say three columns. And this will evenly distribute the columns so they'll all have even widths. Also you have the ability of collapsing, so this will collapse the table so it takes up no more space than needed. After that we have padded, so I can say padded right here and we can hit refresh and now we have a little bit more padding on there. I'm gonna leave that on, I like that. Of course you have compact as well. You also have small, to bring down the text size and you can also have large for an increased text size, just like so. So, this is looking real nice. And then the only other thing that you have is the colors. So, I can specify a color right here because we have a segment. So, if you review the segment documentation, you will notice that when you scroll down to the bottom you have the colors. So the colors are just this little band along the top. But however, if you set it to inverted it will actually color the main body, instead of just having this as a little top color. So for example I can set this to red and all that will happen is you will just get a little red line at the top. But if you set it to inverted as well, you shall get the red color in here. And also if you just leave it on inverted, you'll just get a dark color, just like so. And if you'd like to know all the colors available, just take a look right here. You have blue, orange, green, red, purple, and teal. So there is our about page with the table inside of it. Now I also want to take a look at the table rows and the table cells. So let's open up the tbody. So, I'm just going to take a look at adding classes onto the table row and also to the table cell. Now inside of this table cell I'm actually going to add in an icon. Let's give it the class of icon and then we'll make it the bell icon. It could be whatever icon you wanted. And then, let's take a look at the, adding a class to the table row and also to this table cell. So, I'm going to put on the class attributes we're going to first start out with positive which will be the green star link, so I'm going to save that, go back, hit refresh. And there is the icon and you'll notice you are getting that nice styling in there. Also you can set it to negative. Just like so. Hit refresh. There's negative. You also have error. So if I save that. Hit refresh. You'll notice it's pretty much the same as negative. Then you also have warning. And just hit refresh. And there we go. The other one is active, so that could be the current active cell, piece of data. And then also you have disabled. And we can save that, hit refresh, and there we go. So, we have all those options available to us. Also what's really nice about the table is the fact that it is mobile responsive, so when we go down after a certain size you'll notice that it automatically adjusts the content, very, very nice. So now that we have the table done what I want to do next is take a look at adding in a comment section below the table. So now what I want to do is add in a nice little segment so that I can put my comments in there. So if we actually take a look at the segments we're not really gonna go into this much. But we have the piled segment which looks like piled bits of paper. So I'm just going to take a look at the code. So we need a div with the classes of UI piled segment. So I'll just copy that out. So it has all those three classes, and then you can just put some text in here, just randomly, and hit refresh. So now you can see we have the piled segment. The next thing to do is take a look at filling up this segment with the comment section. So if you look underneath views, you will see you have comment. And the comment is fairly simple, you just have the comments, you can have a reply and delete link inside of there. You also have a form down below that is optional. And so you can just take a look at this. It's fairly simple you don't have to have it in a segment. You can just have it freeform without the segment. And then again you have your reply form. And also you have some variations. So for example in your variations, you have the ability to have threaded. So you just have these nice lines in here. But you can also have minimal as well. Which also is quite nice when you have the delete and reply links. Because when you hover over a comment, you will actually get those links. So let's stick with minimal. So, after we have taken a look at this it's now time to put that in to our page. So, as you know, we have our segment which is just a nice dressing around the comments. But it's non essential. Then inside of the segment we have the div with a classes of UI and comments. So this will house all of the comments. And currently we only have one comment in our comments section. So we have a div with a class of comment, then we have an anchor. And this anchor's going nowhere, but it could go to a user profile. And also it has the class of avatar. And inside of there we have an image which is linking to the person.jpg the same one in the footer and with the alt attributed person. So when I add the class of avatar around it, it will automatically turn it into a circle and shrink it down to size. Then we have the content of the comment. So again we have the div with the classic content, inside of there we have an anchor that goes nowhere with the class of author. And then you can put the person's name. Then we have the div for the class of meta data. And so inside of there you have a span with a class of date. And then it could say, one hour ago, one day ago or whenever this was posted. Then we have the div with the class of text, which is the text that the user has actually submitted. And then we have the div with a class of actions. So with the actions you have, an anchor with the class of reply and also you have another anchor with a class of delete. And then they both have icons inside of there. That's completely optional I just decided to do that for an added affect. And then you just have the text. So if I save this and then you refresh in the browser, this is what you'll get. A nice little avatar. You will get the author, you will get the meta data, the text and then also you will get the links to reply and delete. Now let's say that somebody has hit the reply link and replied to this individual. Well what we can do is copy this comment. And now this comment that somebody has replied to this right here becomes a part of the content of the comment. So inside of the content div element and just below the actions right here, I'm gonna paste in the comment again, so I've duplicated the comment like so, so if I save that now and we hit refresh. You'll notice that is a reply to this individual. And you can just keep going and going and going with this for example. Let's say another individual replies to that comment again, I can paste this below. Let's re-indent it. So if I save that, you'll notice we have another reply to this individual. And you can replies to this individual, that individual, and you can just keep going and going and going. So now let's take a look at applying the minimal effect, so I'm just going to add another class onto the main div, that wraps around all of the comments. So I'm just gonna say minimal, save it, hit refresh. And now notice the buttons are still there, but we have to hover over. And what's really nice is, if I hover over this reply, it'll also show it on the parent that I've replied to. So the next thing I want to do is take at a look at adding in a comment form down below. So, if you scoot on over to the page, underneath the comment div we want to add a form element with the classes of UI, reply, and form. Inside of the form, we're gonna have a div with a class of field, so a field within the form. And then we want to take a look at adding in a text area. Just like so, where the user will type their comment text. Then also on top of that we want to put in a div for the class of UI, and this is actually gonna be a button. And it's gonna be a submit button. We want this to be a labelled icon button. And we'll just make it black. All right, so once we've got that we can then put in an icon. So let's put the classes on here. So this is gonna be an icon. We'll put the edit icon in there. And then the label, which is reply. If I save that, go back, hit refresh, you'll notice we now have a reply form. So thank you for watching me in this lesson. And please join me in the next lesson where we'll take a look at the portfolio page.