How create table without using <table> tag ?
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.