HyperText Markup Language (HTML) is the standard markup language used to create web pages. HTML allows table creation using the <table> tag. However, tables can also be created in HTML without using <table> tag with the help of Cascading Style Sheet (CSS). CSS is a mechanism for adding style (e.g. fonts, colors, padding, and other decorative features) to otherwise plain HTML web pages. There are various CSS frameworks available like BootStrap, Foundation, Pure, Bulma, UI kit, Materialize CSS, Semantic UI, Spectre and many more. Bootstrap is the most widely used CSS framework. Bootstrap is a free and open-source CSS framework that provides large libraries for front-end developers which makes it popular among the developers. The current version of BootStrap is Bootstrap 4. Bootstrap’s grid system uses a series of containers, rows, and columns to layout and aligns content that can be used to built tables to serve the user requirement. Bootstrap also comes bundled with in-built utility classes that can be used to quickly style elements without using any CSS code. Bootstrap’s grid system has an in-built flexbox and is fully responsive. Flexbox is a one-dimensional layout model that offers space distribution between items in an interface and powerful alignment capabilities. The code below demonstrates the creation of table using the BootStrap Framework of CSS.
- Containers are used to center and horizontally pad the actual content.
- Rows encapsulate the columns.
- Columns are the immediate children of rows. Content must be placed within columns. Columns without a specified width automatically appear as equal-width columns. We can specify column width explicitly and also assign different width for different screen sizes. We can specify background colors for different rows or columns using the predefined utility classes (like bg-success, bg-info, bg-danger, bg-warning ), a style sheet or inline styling.
- Border is a predefined class in BootStrap that creates border around the cells. Also, there are several border utility classes(like border-dark, border-light, border-danger, border-success, border-warning) available to further enhance the look and feel by imparting colors or border width.
- How to create table with 100% width, with vertical scroll inside table body in HTML ?
- How to create a table row using HTML5 ?
- How to create table cell using HTML5 ?
- How to create equal width table cell using CSS ?
- Node.js | MySQL-Create Table Using Sequelize
- How to create sticky table headers in Chrome ?
- How to make Bootstrap table with sticky table head?
- How to remove table row from table using jQuery ?
- How to add table row in a table using jQuery?
- p5.Table set() Method
- Bulma | Table
- p5.js Table getRow() Method
- p5.js | p5.Table addColumn() Method
- p5.Table findRows() Method
- p5.js Table removeColumn() Method
- How to fix the height of rows in the table?
- Space between two rows in a table using CSS?
- HTML | DOM Table Object
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.