Adding Tables

Himanshu Verma
A free video tutorial from Himanshu Verma
Data Analyst, Web Developer & Instructor
4.3 instructor rating • 2 courses • 7,980 students

Learn more from the full course

Learn HTML and CSS from Scratch - Build Responsive Websites

Learn to build modern responsive websites step by step using the latest HTML5 and CSS3 and become a Web Developer!

21:09:49 of on-demand video • Updated August 2020

  • Build responsive websites
  • HTML - Basic to Advance level
  • CSS - Basic to Advance level
  • Flexbox & Grid Layouts
  • CSS Transition, Animation, Overlays & More
  • Responsive (Mobile friendly) web design to support any device
  • Website Hosting & Deployment
  • Website Optimization
  • Start your career as a Web Developer
English [Auto] Hello and welcome back. This lesson is gonna be about how we can add tables on our website value at a table. We have the table element and we can add opening and closing table text to create a table. Now all the data for the table such as rows columns and headings will go inside these table texts. The next element we have is the table row element represented by TR. This one creates a new row inside the table. So if I add opening and closing TR text then it will create a new row like this. If you want to add multiple rows then you can add multiple to your texts and this will add multiple rows. Now when we have a row created we can start the writing table heading values using each element. We can add multiple heading values for a row using multiple yet stacks. For example if we have three heading values then we cannot treat each tax for the values inside and they will look like in this example well after the heading we can add the column values for each row using the TDA element. So it functions the same way as sdh. The only difference is that we use DNA when we are writing heading D.D. when we are adding the values or data. So let's say if I want to add three values in the second row then I can go inside the second row tax and add treaty the tax and this is how it will look but it's important to note that all the values for a particular row go inside that row tax. That's why all the heading values which are in the first row were added inside the first row tax and likewise the values for the second row were added inside the second row tax in the same way. I can add the three values for the third row as well. Again using the EDI tax and it shows the values in the third row. So this is how the final table structure looks. For us we have to table tax and then inside we have the TR tax for each row and then we have the D S O T D tax inside each row tax for adding data in each row. Now if your table doesn't have any headers then you don't need to add the DOJ tax and you can directly start with the D tax for the values just like in this example so the structure is the same but this time only the header tax that is the edge are not there. So this is how we can edit table and now let's get into the practice and create a new table from scratch. So I go to average German document and begin with adding opening and closing table tax then inside. I like the first row using the TR tax now the first row is added. Let's start with the heading. And for each heading I add that each tax then inside let's add some random values like serial number then model number and brace Let's now see how it looks at this point I saved the document and refresh. So now we have this table with only one row and three heading values just like we have added. Well it doesn't really look good at all. We don't see any borders the text size is too small and there's almost no space between different values. I'll come to that and show you how we can improve the look of the table. But let's first finish adding some data for this I add one more row again using that year tax and then add as you know that these tax and then inside let's start adding some random values again I again save and refresh. Now I have another rule added that values. Let's now see how we can style this table. So earlier before each dismal five we could use certain attributes for the table. But most of them have now been deprecated and we don't see them anymore. In each table five. Because now the says has evolved so much that it can style a table really well without us having to learn additional attributes. I talk about that as well. But one of the attributes that we can still use is border attribute and it can have a value as either one which means a border or zero which means no border. And by default the value set to zero. And that's why we don't see any border on our table so using it is simple. We just have to go inside the table and add the attribute border then type is equal to an inside codes. Let's take one I saved a document and then refresh. Now I can see the borders. Next we have written height attributes as well let's now see how it looks. Well it looks likely better but it doesn't really look that good. Even now that in order to style this table even more we need to use the CSF properties. And that's why it's now essential to talk about some of the season's properties that we can add to improve the look of this table. And overall there are three ways of adding CSX which I'll be talking about in the CSX lessons. But in this lesson I'm going to talk about the one of the three ways of adding CSX which is also the simplest way and that way is called inline CSX which means adding CSX properties inside the opening tax using the style attribute it's important to note that we are using this style attribute only to add the CSX properties and values which means that only the style is equal to the attribute and the rest that I'll be adding inside our old CSX properties and values. All right so let's start with the syntax of inline CSX which is style is equal to an inside quartz property in value followed by semicolon in case of multiple properties and values. We can add them all inside the same style attribute. Just like here. So we have style is equal to and then inside court property one call in value one followed by a semicolon then property to call on value 2 followed by semicolon again and so on. So clearly the semicolon is a separator for each new property. And we always and eat CSX as property call in value using semicolon. All right so now let's take a look at the different properties we can use for the table. But these are not all there are a few more that I wouldn't be talking about for the scope of this lesson. However I've added a complete lesson on styling the tables as part of the CSA as lessons. All right so we have font size to change the size of the text then text aligned to horizontally align the text to the left or right or center then we have vertical aligned to vertically align the text to top middle or bottom 10 font weight if we want to make the text bold or light and font style to keep the text normal or italic and text declaration if we want to underline the text and also we have the border collapse property to collapse the borders and I'll demonstrate it as well but before that let me quickly show you how we can add them I go inside the table and type style is equal to and inside codes. Let us first use the font size then semicolon and add text line property and let's make it center and then again semicolon at the end. Now save the document and then before I refresh you can see that the content is aligned on the left side. And when I refresh the tables content are now big and at the same time are aligned in the center. Let's now go back to the document and add another property inside after the semicolon. And I'm going to try this time the vertical align property and then set it to let's say a top and then don't forget the semicolon at the end. Let's now see how it looks on the website refresh again and nothing happens. Well not all the properties work at the table level. In other words right now we have specified all the properties inside the table tag and any property we add at this table level that is inside this opening table tag will be applicable for all the contents in the table. This also means that if I want to see a line only the first row then I can go inside the T attacks of the first row and then add for example style is equal to and then inside coats again text align and let's make it left this time so at the table level we have instructed to align all the text in the center. But at this particular role we are instructing the browser to align the content on the left. Let's now see how it looks. Now we can see that this first row has the contents aligned on the left but for the other rows it's still at the center. So this is the quality of CSX which is cascading style sheet. It first follows the style instructions at the table level but cascades it down to individual style instructions or in other words it follows the table instructions. But if it finds something else mentioned at an individual element level then it follows that instead for that particular element. And that's why it gives more value to what we specified as the text line property for this individual row. Whereas for others it continues to follow what is specified at the table level not to the same row. Let me try adding the vertical line property as well. And set it to top then save it and refresh now it looks fine I can then copy the same style to the second row as well with vertical align top and this will make the contents of the second row vertically top aligned as well. Now you might be wondering what I have to add this tile attribute each time for each row. Then let me tell you that this is only one way of adding CSX which as I mentioned is in line CSX but there's a more professional or advanced way of adding CSX using which you can tell the browser to apply the same properties for all the elements together but we'll cover that in the CSX lessons. Having said that this way of heading CSX is sometimes useful like you so that we can also Jesus uses tiles for you in one particular element by adding another value now after this. If I add to this table style more properties like font weight bold then text equity shouldn't underline and then font style italic and let's not forget the semicolon after each value now on the website. We can see that changes if I move let's say these two properties from this stable style and added to the first row instead and see it on the beach and this time only the first voice bold and underlined since I edited this style only for the first row. Then I would also like to talk about the border collapse property I can add this at the table level as well I go inside the courts and add the border collapse property and set it to collapse and then when I save the document and go to the browser first you can see that in this table we have separate borders around each cell because separate is the default value and therefore these borders look double like these two. So when I have said the property to collapse then it will collapse the two borders and make them one. So let me rephrase the browser and you can see that now we no longer have any double border lines. They have now collapsed to only one so these are some of the customizations we can do to the table. In addition to that I have created a dedicated lesson on styling tables in the Sears module. I'll explain how we can add more cool styles in the table and we'll do that using another rate called external C Ss which is more scalable and modern way of adding C Ss but until then you can practice adding tables and play around with these different style properties. Now to this table if you want to add more rows that you can use a short could read that is copied this entire content from TR and based it again this will add another row with column values that you can change. This will save you a lot of time. Lastly let me tell you about three important things that you can additionally use with the tables. The first one is the caption element and as the name suggests using the caption element you can add a caption or the title of the table and we can add it using caption elements right in the beginning. Inside the table tax even before the starting of the first row it can be any title now by default it is placed at the top of the table like this. And sometimes we want to keep the caption at the bottom of the table. So in that case we can change its position again using CSA as property called caption side but bottom as the value. So I can add inside opening caption tag style is equal to and then inside quotes type caption side bottom. And that's all now up to this point. You know how to create a table and customize its appearance as you like but there can be slightly different kind of tables like this Well what's different about this table is that in few places the cell height is equal to two rows. And elsewhere we have two rows in the same space. Or in this case the cell which spans two columns. So this is only one cell whereas these are two cells in the same space. Well you can easily do this using two attributes called row span for Row and calls and four columns so let's say here's the table first we want to make this cell for additional charges to rows high. So I can get inside the D.D. tag row span is equal to to where two means two rows high. If I take three then it will make it three rows high and so on. And secondly we want to make this cell for subtotal two columns wide. So again I go to the C D tag for the subtotal and type call span is equal to 2 again because we want to expand it to two columns and the output will look the same so this row span is for increasing the vertical space that is rows and the school's ban is for increasing the horizontal space that is columns. So this was about adding tables in each table and you can try adding new tables on your website and play around with these different elements and attributes. Also keep learning and see you in the next lesson.